CODEWITHSUNDEEP
jqueryvalidation
nodeffect
nodeffect

Reputation: 1840

jQuery Validation on three selection boxes as one

I have a form with email and Dob field. I'm using jquery validation plugin to validate those fields. However, since dob has three selection box, it validates each of the selection box. I'm trying to group those as one so if the user selects date but not month or year, it returns error on the side of those three selection box.

All I have now is that it will validates all three boxes and the error message will appear on each of those three boxes. How can I group them together as one and display the error message on the side of those three boxes together.

My html form as below:

  <div>
    <label for="registerEmail">Email</label>
    <input type="email" name="registerEmail" id="registerEmail">
  </div>
  <div>
    <label for="registerDOB">Date of Birth *</label>
    <select class="date" id="dobday" name="dob[]" value=""></select>
    <select class="date" id="dobmonth" name="dob[]" value=""></select>
    <select class="date" id="dobyear" name="dob[]" value=""></select>
  </div>

and my jquery script:

  $(".validate").validate({
    rules: {
      registerEmail: "required",
      'dob[]': "required",
    }
  });

My jsfiddle: https://jsfiddle.net/h7w711y2/2/

Upvotes: 0

Views: 22

Answers (1)

squaleLis
squaleLis

Reputation: 6484

I think you have 2 alternatives:

  • set up a group for "dob[]" fields

    $(".validate").validate({
    rules: {
      registerEmail: "required",
      'dob[]': "required",
    },
    groups: {
        dob: 'dob[]'
    }
});

  • define your own invalid handler and control yourself what to do.

Upvotes: 1

Related Questions