2017-11-09 12 views
1

私は、チェックボックスの作成に関するいくつかの助けが必要です。チェックボックスが必要な問題

私はブートストラップ4に基づいてフォームを作成しています。ブートストラップのドキュメントでJSの例でフォームを検証しています。フォームに「novalidate」を追加し、入力に「必須」を追加し、 :

(function() { 
    'use strict'; 
    window.addEventListener('load', function() { 
    var form = document.getElementById('forms'); 
    form.addEventListener('submit', function(event) { 
     if (form.checkValidity() === false) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     } 
     form.classList.add('was-validated'); 

     }, false); 
     }, false); 
    })(); 

すべてが順調に行っているが、今私はいくつかのチェックボックスを持って、私は、ユーザーの確認少なくとも一つの場合にのみ、それを検証したいと思います。これを検証するために別の関数を作るべきか、現在のものを構築するべきかどうか、私は疑問に思っていました。いずれにしても、誰かが私を助けてくれたら大変感謝しています。

これは、チェックボックスのコードは次のとおりです。事前に

<div class="form-row"> 
<div class="form-group col-md-4"> 
    <label for="checkboxes">Indícios:</label> 
    <div class="form-check"> 
    <label class="form-check-label"> 
    <input class="form-check-input" id="" type="checkbox" value="1"> 
    1 
    </label> 
</div> 

    <div class="form-check"> 
    <label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value="2"> 
    2 
    </label> 
</div> 

    <div class="form-check"> 
    <label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value="3"> 
    3 
    </label> 
</div> 

    <div class="form-check"> 
    <label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value="4"> 
    4 
    </label> 
</div> 

    <div class="form-check"> 
    <label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value="5"> 
    5 
    </label> 
</div> 
</div> 

<div class="form-group col-md-4"> 

<label for="checkboxes1">&nbsp</label> 
    <div class="form-check"> 
    <label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" id="checkboxes1" value="6"> 
    6 
    </label> 
</div> 

    <div class="form-check"> 
    <label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value="7"> 
    7. 
    </label> 
</div> 

    <div class="form-check"> 
    <label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value="8"> 
    8 
    </label> 
</div> 

    <div class="form-check"> 
    <label class="form-check-label"> 
    <input class="form-check-input" type="checkbox" value="9"> 
    9 
    </label> 
</div> 

</div> 
</div> 

おかげでトン!

答えて

1

あなたはここにjQueryを使用することを言及しているので、あなたがクラス.FORMチェック入力とし、持つ任意の入力がある場合、これはチェックを機能

function checkCheckboxes = function() { 
    return ($('.form-check-input:checked').length > 0); 
}; 

checkValidity方法あなたに追加できる機能です。チェックします州はhtmlで利用可能です。そうであれば、チェックボックスの有効性が有効です。

+0

お返事ありがとうございます!私は本当にこれが私が必要と思う、私は自分のthoの中でその機能を追加する場所に問題があります。試してみましたが、うまくいかないようです。 ところで、それをcheckValidityメソッドに追加すると、チェックスタイリングもチェックボックスに適用されます。それは素晴らしいだろう。 – JohnyJohnson

関連する問題