Search code examples
javascriptjqueryjquery-validation-engine

How to perform a minCheckBox validation on jQuery Validate Engine?

In a form with three checkboxes I need to validate at least one of them has been checked. The company I work for is using jQuery Validation Engine. I am testing with the latest version/release.

As per library requirements my code should looks like:

<input type="checkbox" name="agreement" value="1" id="agreement_0" class="validate[minCheckbox[1]] checkbox">
<input type="checkbox" name="agreement" value="1" id="agreement_1" class="validate[minCheckbox[1]] checkbox">
<input type="checkbox" name="agreement" value="1" id="agreement_2" class="validate[minCheckbox[1]] checkbox">

If I go that way indeed the validation does work and at least one of them is required however my $_POST only contains the last of them, I guess is because they are sharing the same name (which I think is incorrect). Here are the docs for minCheckbox.

If I use instead the following approach (which is the correct as per my knowledge) then I end up with Javascript errors:

<input type="checkbox" name="agreement[]" value="1" id="agreement_0" class="validate[minCheckbox[1]] checkbox">
<input type="checkbox" name="agreement[]" value="1" id="agreement_1" class="validate[minCheckbox[1]] checkbox">
<input type="checkbox" name="agreement[]" value="1" id="agreement_2" class="validate[minCheckbox[1]] checkbox">

Uncaught Error: Syntax error, unrecognized expression: input[name=agreement[]]

Bottom line:

  • With the first approach validation does work properly but I am only getting the value of the last input once posting the form.
  • With the second approach validation fails with a Javascript error but I should be getting all the inputs on the array agreement[].

Am I missing something here? How would you do this validation using jQuery Validation Engine?

Note: I can provide more details if needed and I can't change the library at this point in time.

Solution

  • Looks good to me, am i missing something?

    $('form').validationEngine();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery-1.8.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css"/>

My Form
<form>
  <input type="checkbox" name="agreement[]" value="1" id="agreement_0" class="validate[minCheckbox[1]] checkbox">A
  <input type="checkbox" name="agreement[]" value="1" id="agreement_1" class="validate[minCheckbox[1]] checkbox">B
  <input type="checkbox" name="agreement[]" value="1" id="agreement_2" class="validate[minCheckbox[1]] checkbox">C
</form>