验证-至少选中一个复选框

Question

I have a problem in validating whether at least one checkbox is checked or not.

The same code is being used for a different form and its working perfectly but I can't figure why it doesn't on this form.

Script:

if(jQuery('#MOTForm input[type=checkbox]:checked').length == 0) { 
       alert("1");
       valid = valid && false;
       $("#MOTFORMERROR").css('color', 'red');
       $("#MOTFORMERROR").html("*Choose at least one");
}else{
       $("#MOTFORMERROR").html("");
}

Html:

<td style="width: 10%;" rowspan="3">
    <div style="padding-left:5px;">
       <form id="MOTForm">
           <input name="" type="checkbox"  class="form-check-input"/> HEMS<br />
           <input name="" type="checkbox"  class="form-check-input"/> EMS<br /> 
           <input name="" type="checkbox"  class="form-check-input"/> Walk-in<br />
       </form>

       <p id="MOTFORMERROR"></p>
    </div>
</td>

The code in the block of the if statement is being run all the time, instead of the code in the block of the else statement, even if one or all checkboxes are checked!

Answer 1

Since the variable valid wasn't defined, there was an error in your initial code (see below). This error is visible in the browser console .

Uncaught ReferenceError: valid is not defined

Because of that error, the lines after valid = valid && false; are not being executed.

To fix this, declare that variable before this code is run:

var valid = false;
//...other code to check if form is valid

Then move the original JavaScript code into a function that can be run on submit (eg function check() {...} ). See this demonstrated below. It uses the jQuery function .click() to bind the event handler to the submit button. You will also notice it uses .ready() to wait until the DOM is ready before binding the event handler to the submit button.

 //wait until DOM is ready to bind check function to button click $(document).ready(function(readyEvent) { $('#submit').click(check); }) var valid = false; function check() { if (jQuery('#MOTForm input[type=checkbox]:checked').length == 0) { alert("1"); valid = valid && false; $("#MOTFORMERROR").css('color', 'red'); $("#MOTFORMERROR").html("*Choose at least one"); } else { console.log('no error- clearing error html'); $("#MOTFORMERROR").html(""); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="padding-left:5px;"> <form id="MOTForm"> <input name="" type="checkbox" class="form-check-input" /> HEMS <br /> <input name="" type="checkbox" class="form-check-input" /> EMS <br /> <input name="" type="checkbox" class="form-check-input" /> Walk-in <br /> <button id="submit"> Submit </button> </form> <p id="MOTFORMERROR"></p> </div> 

Update:

You typed a comment on your post (replying to questions in other comments):

valid is declared at the beginning of .click

Now that that information is revealed, it makes me feel like most of what I said above is useless. Moving the declaration of valid into the click handler seems like a trivial change and there isn't much different besides that... See the example below:

 //wait until DOM is ready to bind check function to button click $(document).ready(function(readyEvent) { $('#submit').click(check); }) function check() { var valid = false; if (jQuery('#MOTForm input[type=checkbox]:checked').length == 0) { alert("1"); valid = valid && false; $("#MOTFORMERROR").css('color', 'red'); $("#MOTFORMERROR").html("*Choose at least one"); } else { console.log('no error- clearing error html'); $("#MOTFORMERROR").html(""); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="padding-left:5px;"> <form id="MOTForm"> <input name="" type="checkbox" class="form-check-input" /> HEMS <br /> <input name="" type="checkbox" class="form-check-input" /> EMS <br /> <input name="" type="checkbox" class="form-check-input" /> Walk-in <br /> <button id="submit"> Submit </button> </form> <p id="MOTFORMERROR"></p> </div> 

Answer 2

your code does not show when the javascript is executed, maybe your checkboxes are not yet rendered when you look for them.

In fact if you run your code in the exact order you posted here is perfectly normal that your condition is always true.

If you put your code inside a function to be called after all the HTML is rendered everything works perfectly:

<td style="width: 10%;" rowspan="3">
    <div style="padding-left:5px;">
        <form id="MOTForm">
            <input name="" type="checkbox"  class="form-check-input"/> HEMS<br />
            <input name="" type="checkbox"  class="form-check-input"/> EMS<br />
            <input name="" type="checkbox"  class="form-check-input"/> Walk-in<br />
        </form>
        <p id="MOTFORMERROR"></p>
    </div>
</td>



<!-- ... -->



<button id="check_btn">Click me</button>



<!-- ... -->



<script>
var valid;

$('#check_btn').click(function() {
    if ($('#MOTForm input[type=checkbox]:checked').length == 0) {
        valid = false;
        $("#MOTFORMERROR").css('color', 'red');
        $("#MOTFORMERROR").html("*Choose at least one");
    } else {
        $("#MOTFORMERROR").html("");
    }
});
</script>

Answer 3

Please have a look at the following snippet. It does that you are looking for. I removed the valid variable, since it isn't apparent, where this parameter is used. Apparently, you can add it and use it as you think.

 $(function(){ function checkCheckBoxes(){ if($('#MOTForm input[type=checkbox]:checked').length == 0) { alert("1"); $("#MOTFORMERROR").css('color', 'red'); $("#MOTFORMERROR").html("*Choose at least one"); } else { $("#MOTFORMERROR").html(""); } } $(".js-check").on("change", checkCheckBoxes); checkCheckBoxes(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <td style="width: 10%;" rowspan="3"> <div style="padding-left:5px;"> <form id="MOTForm"> <input name="" type="checkbox" class="form-check-input js-check"/> HEMS<br /> <input name="" type="checkbox" class="form-check-input js-check"/> EMS<br /> <input name="" type="checkbox" class="form-check-input js-check"/> Walk-in<br /> </form> <p id="MOTFORMERROR"></p> </div> </td>