CODEWITHSUNDEEP
javascriptjqueryjquery-validate
Andrew Boes
Andrew Boes

Reputation: 2043

jQuery validate only validates one field

I am using jQuery validate to validate a form. I have two text boxes on my form and only the first one will add the "This field is required." message. If I remove the "required" class from the first one the second will have the message.

html:

<form id="questionForm">
<div><input class="required" id="value" type="text" /></div>
<div><textarea class="required" id="description"></textarea></div>
<button type="submit">Save</button>
</form>

javascript:

$("#questionForm").validate({ submitHandler: function() { 
        alert("valid");
    } 
});

Why is only one being validated?

Edit: I'm using jQuery validation plug-in 1.7

Edit 2: I'm using MVC 3

Upvotes: 46

Views: 14929

Answers (5)

Abdullah
Abdullah

Reputation: 2953

Make sure you added name property in your required field

$(document).ready(function() {
  $("#basic-form").validate({
  // comment it out if you want to hide error messgae below inputfield
    /*errorPlacement: function (error, element) {
      return true;
    }*/
  // Call once form is valid
  submitHandler: function (form) {
    alert('Done');
  }
  });
});
body {
  margin: 20px 0;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.25rem;
  width: 300px;
}

form, p {
  margin: 20px;
}

p.note {
  font-size: 1rem;
  color: red;
}

input {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 4px;
  font-family: 'Lato';
  width: 300px;
  margin-top: 10px;
}

label {
  width: 300px;
  font-weight: bold;
  display: inline-block;
  margin-top: 20px;
}

label span {
  font-size: 1rem;
}

label.error {
    color: red;
    font-size: 1rem;
    display: block;
    margin-top: 5px;
}

input.error {
    border: 1px dashed red;
    font-weight: 300;
    color: red;
}

[type="submit"], [type="reset"], button, html [type="button"] {
    margin-left: 0;
    border-radius: 0;
    background: black;
    color: white;
    border: none;
    font-weight: 300;
    padding: 10px 0;
    line-height: 1;
}
<body>
<!-- partial:index.partial.html -->
<form id="basic-form" action="" method="post">
    <p>
      <label for="name">Name:</label>
      <input id="name" name="name" minlength="3" type="text" required>
    </p>
    <p>
      <label for="email">E-Mail <span>(required)</span></label>
      <input id="email" type="email" name="email" required>
    </p>
    <p>
      <input class="submit" type="submit" value="SUBMIT">
    </p>
</form>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js'></script>

</body>

Upvotes: 0

Sulabh Singla
Sulabh Singla

Reputation: 116

You have to enter the name attribute for every DOM element which you want to validate using the Jquery.validate() function .

Upvotes: 3

Jay
Jay

Reputation: 1326

I just ran into this issue myself. Pulled my hair out for an hour, but here it is:

Throw the "name" attribute in there as well and that may do the trick.

Upvotes: 131

Joshua - Pendo
Joshua - Pendo

Reputation: 4371

I think the alert is blocking the validation of both fields. After 1 alert the rest of the javascript stops. What happens if you use $('#questionForm').validate(); instead?

Upvotes: 1

Oliver Spryn
Oliver Spryn

Reputation: 17348

Without knowing what validation plugin you are using, it is difficult to nail down the problem. However, it seems as though jQuery isn't loop through each of the fields, but it stops when it reaches in an invalid field. Try using the jQuery $.each() method, and using some conditionals to make sure the validation process does not stop when the validator reaches an invalid field.

Hope that helps,
spryno724

Upvotes: 1

Related Questions