jQuery validate only validates one field
I am using jQuery validate to validate a form. I have two text boxes开发者_如何学Python 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
- http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- http://docs.jquery.com/Plugins/Validation
Edit 2: I'm using MVC 3
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.
You have to enter the name attribute for every DOM element which you want to validate using the Jquery.validate() function .
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
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?
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>
加载中,请稍侯......
精彩评论