web-dev-qa-db-ja.com

簡単なJavaScriptチェックボックス検証

私は通常PHPで作業しているので、悲しいことにいくつかの基本的なJSの原則がありません。これが達成したいことです。このトピックに関する多くの投稿を見てきました。私は欲しい。

私のフォームは次のとおりです。

 <input type="checkbox" name="checkbox" value="check"  />
 <input type="submit" name="email_submit" value="submit" onclick="----??----"  />

チェックボックスは単純な「同意する」です。送信ボタンを押して、そのチェックボックスが選択されている場合にのみ送信します。

ここに問題があります：単純で不正な方法が必要です-メソッドはありません-その形式のインラインコードがいくつか必要です（長すぎないことを前提としていますか？）。これは公開ページではありません。このタイプの検証では、すばやく簡単なものが必要です。チェックされていない場合、alert（）をスローします。チェックされている場合、phpを介してポスト経由で送信され、通常どおりに続行されます。

javascripthtmlformsvalidation
12
TheLettuceMaster

次を使用できます。

 if(!this.form.checkbox.checked)
{
    alert('You must agree to the terms first.');
    return false;
}

（ デモページ ）。

<input type="checkbox" name="checkbox" value="check"  />
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}"  />
  • インラインイベントハンドラーからfalseを返すと、デフォルトのアクションが実行されなくなります（この場合、フォームの送信）。
  • !は ブールNOT演算子 です。
  • thisは、イベントハンドラーが関連付けられている要素であるため、送信ボタンです。
  • .formは、送信ボタンがあるフォームです。
  • .checkboxは、そのフォームの「チェックボックス」という名前のコントロールです。
  • .checkedは、チェックボックスがチェックされている場合はtrue、チェックされていない場合はfalseです。
31
PleaseStand

今のところjqueryやphpは必要ありません。ここにあるような「必要な」HTML5入力属性を使用する

 <form>
        <p>
            <input class="form-control" type="text" name="email" />
            <input type="submit" value="ok" class="btn btn-success" name="submit" />
            <input type="hidden" name="action" value="0" />
        </p>
        <p><input type="checkbox" required name="terms">I have read and accept <a href="#">SOMETHING Terms and Conditions</a></p>
 </form>

これにより、チェックボックスが有効になる前に送信が検証および防止されます。ユーザーのWebブラウザーによって生成されるため、言語に依存しないソリューションです。

5
PrestaShark

次のようなことができます：

<form action="../" onsubmit="return checkCheckBoxes(this);">
    <p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p>
    <p><input type="SUBMIT" value="Submit!"></p>
</form>

<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
    if (
    theForm.MyCheckbox.checked == false) 
    {
        alert ('You didn\'t choose any of the checkboxes!');
        return false;
    } else {    
        return true;
    }
}
//-->
</script>

http://lab.artlung.com/validate-checkbox/

読みやすさは劣りますが、これは次のような個別の関数定義なしで実行できます。

<form action="../" onsubmit="if (this.MyCheckbox.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }">
    <p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p>
    <p><input type="SUBMIT" value="Submit!"></p>
</form>
4
Eric J.

次のことができます。

<form action="/" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('please agree'); return false; }">
    <input type="checkbox" name="checkbox" value="check" id="agree" />
    <input type="submit" name="email_submit" value="submit" />
</form>​

ここに実際のデモがあります- http://jsfiddle.net/Ccr2x/

3
tjscience
var confirm=document.getElementById("confirm").value;
         if((confirm.checked==false)
         {
         alert("plz check the checkbox field");
         document.getElementbyId("confirm").focus();
         return false;
         }
2
siva

チェックボックスのID "削除"の場合、onclick "イベントの送信ボタンのjavascript関数次のようになります。

html:
<input type="checkbox" name="Delete" value="Delete" id="Delete"></td>
<input type="button" value="Delete" name="delBtn" id="delBtn" onclick="deleteData()">

script:
<script type="text/Javascript">
    function deleteData() {
        if(!document.getElementById('Delete').checked){
            alert('Checkbox not checked');
            return false;
        }
</script>
1
Mahesh

チェックボックスのIDが「checkbox」の場合：

 if(document.getElementById('checkbox').checked == true){ // code here }

HTH

1
Jordizle

別の簡単な方法は、関数を作成し、チェックボックスがチェックされているかどうかを確認し、jQueryを使用してそのようにボタンを無効にすることです。

HTML：

<input type="checkbox" id="myCheckbox" />
<input type="submit" id="myButton" />

JavaScript：

var alterDisabledState = function () {

var isMyCheckboxChecked = $('#myCheckbox').is(':checked');

     if (isMyCheckboxChecked) {
     $('myButton').removeAttr("disabled");
     } 
     else {
             $('myButton').attr("disabled", "disabled");
     }
}

これで、チェックボックスを選択するまでボタンが無効になり、ユーザーエクスペリエンスが向上しました。ただし、サーバー側の検証は引き続き行うようにします。

1
maxshuty

もう1つの簡単な方法は、フォームがロードされ、送信ボタンがクリックされたときに関数validate()を作成して呼び出すことです。 checkedプロパティを使用して、チェックボックスが選択されているかどうかを確認します。 cbox[0]にはインデックス0があり、name="gender"で最初の値（男性）にアクセスするために使用されます

次のことができます。

function validate() {
  var cbox = document.forms["myForm"]["gender"];
  if (
    cbox[0].checked == false &&
    cbox[1].checked == false &&
    cbox[2].checked == false
  ) {
    alert("Please Select Gender");
    return false;
  } else {
    alert("Successfully Submited");
    return true;
  }
}
<form onload="return validate()" name="myForm">
  <input type="checkbox" name="gender" value="male"> Male

  <input type="checkbox" name="gender" value="female"> Female

  <input type="checkbox" name="gender" value="other"> Other <br>

  <input type="submit" name="submit" value="Submit" onclick="validate()">
</form>

デモ：CodePen

0
aditya