validating array using jQuery Validate

Question

I am trying to validate an array using jQuery Validate plugin. The array has a numeric key and the key number is not sequential. That means, it could be

cause[0] or cause[2] or cause[7]

Html code

<form id="myform" action="submit.php">
  <select name="cause[0]" id="cause" class="cause">
    <option value="">Cause to Support</option>
    <option value="993">Medical</option>
    <option value="355">Children</option>
  </select>
  <select name="cause[2]" id="cause" class="cause">
    <option value="">Cause to Support</option>
    <option value="993">Medical</option>
    <option value="355">Children</option>
  </select>
  <input type="submit" name="submit" value="submit" />
</form>

Demo -- https://jsfiddle.net/squidraj/afgmqf9g/3/

It's not validating and submitting the form to submit.php file. In firebug error console there is no error as well.

Any help is highly appreciated.

Possible duplicate of How to validate array of inputs using validate plugin jquery — JYoThI
– JYoThI, Commented May 20, 2017 at 7:27
@JYoThI I changed checkForm function as described in that post but didn't work. — Prithviraj Mitra
– Prithviraj Mitra, Commented May 20, 2017 at 7:48

Bharatsing Parmar · Accepted Answer · 2017-05-20 09:06:17Z

1

Try this Working Fiddle

<form id="myform" action="submit.php">
  <select name="cause[0]" id="cause" class="cause">
    <option value="">Cause to Support</option>
    <option value="993">Medical</option>
    <option value="355">Children</option>
  </select>
  <select name="cause[1]" id="cause1" class="cause">
    <option value="">Cause to Support</option>
    <option value="993">Medical</option>
    <option value="355">Children</option>
  </select>
  <input type="submit" name="submit" value="submit" id="btnSubmit" />
</form>

JQuery Code:

$("#myform").validate();
  $(".cause").each(function () {
      $(this).rules("add", {
          required: true,
          messages: {
            required: "Custom Message for required"
          }
      });
  });

  $("#btnSubmit").click(function(e){    
    var isValid= $("#myform").valid();  
    if(isValid==false){
    e.preventDefault();
    }
    else{
        alert("Validate Successful.");
    }
  });

edited May 20, 2017 at 9:06

answered May 20, 2017 at 8:20

Bharatsing Parmar

2,4551 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Prithviraj Mitra Over a year ago

Brilliant. I was wondering if I can add a custom error message.

Prithviraj Mitra Over a year ago

Excellent. Thanks a lot.

Prithviraj Mitra Over a year ago

There is one problem. As this is validating on class name so the error messages are adding after the last class name. There are couple of input elements after the first select box and then the second select box comes. So if I leave the first select box empty and validate then the error message appears after the last select box.

Bharatsing Parmar Over a year ago

It working fine with validating class name but you need to add unique name for each element as in fiddle.

Prithviraj Mitra Over a year ago

Ahh the id should be unique. Sorry for that. Thanks once again.

Sagar Jajoriya · Accepted Answer · 2017-05-20 07:24:29Z

0

Try this :

$("#myform").validate();
$(".cause").each(function (item) {
    $(this).rules("add", {
        required: true
    });
});

Hope it will help

answered May 20, 2017 at 7:24

Sagar Jajoriya

2,3751 gold badge12 silver badges18 bronze badges

1 Comment

Prithviraj Mitra Over a year ago

I tried but didn't work. Updated fiddle -- jsfiddle.net/squidraj/afgmqf9g/6

Collectives™ on Stack Overflow

validating array using jQuery Validate

2 Answers 2

5 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Linked

Related