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](http://stackoverflow.com/questions/24670447/how-to-validate-array-of-inputs-using-validate-plugin-jquery) — JYoThI, May 20 '17 at 07:27
Didn't work with ignore. https://jsfiddle.net/squidraj/afgmqf9g/7/ — Prithviraj Mitra, May 20 '17 at 07:39
@JYoThI I changed checkForm function as described in that post but didn't work. — Prithviraj Mitra, May 20 '17 at 07:48

Bharatsing Parmar · Accepted Answer · 2017-05-20T09:06:17.860

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 '17 at 09:06

answered May 20 '17 at 08:20

Bharatsing Parmar

2,435
1
9
18

Brilliant. I was wondering if I can add a custom error message. – Prithviraj Mitra May 20 '17 at 09:01
1

Excellent. Thanks a lot. – Prithviraj Mitra May 20 '17 at 09:07
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. – Prithviraj Mitra May 20 '17 at 09:38
1

It working fine with validating class name but you need to add unique name for each element as in fiddle. – Bharatsing Parmar May 20 '17 at 09:41
1

Ahh the id should be unique. Sorry for that. Thanks once again. – Prithviraj Mitra May 20 '17 at 09:49

score 0 · Answer 2 · answered May 20 '17 at 07:24

0

Try this :

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

Hope it will help

answered May 20 '17 at 07:24

Sagar Jajoriya

2,377
1
9
17

I tried but didn't work. Updated fiddle -- https://jsfiddle.net/squidraj/afgmqf9g/6/ – Prithviraj Mitra May 20 '17 at 07:35

validating array using jQuery Validate

2 Answers2