Question

I'm using parsley.js to validate a form. It appears to work fine except the checkbox is not being validated. I've tried adding other checkboxes and using data-min-check, but none of them are being validated. I've tried adding data-parsley-trigger with various events, makes no difference.

No errors appear in the console. And I'm using the latest version of parsley. Any ideas?

<form action="form.php" method="POST" id="form" data-parsley-validate>
    <label for="email">Email address</label>
    <input type="email" name="email" class="form-control" id="email"
           placeholder="Enter email" required
           data-parsley-maxlength="128"
           data-parsley-maxlength-message="Cannot exceed 128 characters."
           data-error-message="Required field."/><br/>
    <label for="agreeTerms">
        <input form="form" type="checkbox" id="agreeTerms" name="agreeTerms" required/>
        I have read and agree to the <a href="terms.html">terms and conditions</a>
    </label>

    <div class="submitbutton">
        <button type="submit" value="submit" class="btn btn-xlarge" style="width: 100%">Enter Here to Win
        </button>
    </div>
</form>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/parsley.js"></script>
Was it helpful?

Solution

There were various bugs with radio and checkbox inputs with parsley 2.x < RC5.

I strongly recommend you to upgrade your parsley version to latest.

Sorry for the inconvenience.

OTHER TIPS

I was having the same problem, so I decided to put an invisible checked checkbox with CSS.

Parlsey's validation works fine with two, so one is always checked. The only thing you need to modify is the error messsage because the default will not work in our case. Here is my example and works.

<label for="ingredients">Select ingredients:</label>
<p>
<!-- Check the error message-->
Cheese <input type="checkbox" name="hobbies" value="ski" data-parsley-mincheck="2" data-parsley-error-message="You must select at least one choice" required data-parsley-group="block2"/>

Ham <input type="checkbox" name="hobbies" value="run" />

Mushrooms <input type="checkbox" name="hobbies" value="eat" />

<!--This is the important part-->
<input type="checkbox" name="hobbies" value="eat" style="visibility:hidden" checked/>
<p>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top