I have this form with input text
But when I submit it, only the 1st field (Name 1) will be validated, not the other 2.
How can I validate all 3 fields as required with same input name?
When clicking the submit button, console log should say "all fields are valid" if they are all filled up.
Here's the fiddle. https://jsfiddle.net/o9qrdgch/4/
$(function() {
var rules = [];
var messages = [];
rules['names[]'] = {
'required': true
};
messages['names[]'] = {
'required': 'This name field is required.'
};
$(".form-names").validate({
ignore: '',
rules: rules,
messages: messages,
onkeyup: function(element) {
$(element).valid();
},
onclick: function(element) {
$(element).valid();
},
onfocusout: function(element) {
$(element).valid();
},
invalidHandler: function(event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
validator.errorList[0].element.focus();
}
},
errorPlacement: function(error, element) {
error.insertAfter(element);
},
submitHandler: function(form) {
console.log('all fields are valid')
// form.submit();
}
});
});<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<form class="form-names">
<div class="form-group">
<label>Name 1</label>
<input type="text" class="form-control" name="names[]" placeholder="Enter name">
</div>
<div class="form-group">
<label>Name 2</label>
<input type="text" class="form-control" name="names[]" placeholder="Enter name">
</div>
<div class="form-group">
<label>Name 3</label>
<input type="text" class="form-control" name="names[]" placeholder="Enter name">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
requiredto input?nameattributes must be unique as specified in the markup recommendations here.