I am creating some dynamic field with two fixed fields, My html structure is as follows:
<form method="POST" action="http://localhost:8000/admin/add" accept-charset="UTF-8" class="form-horizontal addclass" id="frmaddclass" enctype="multipart/form-data" novalidate="novalidate">
<input class="form-control error" placeholder="Name" id="name" required="" name="name" type="text" value="" aria-invalid="true">
<select class="form-control" required="" name="status"><option value="" selected="selected">Select</option><option value="active">active</option><option value="disabled">inactive</option></select>
<select class="form-control" required="" name="subject[]"><option value="" selected="selected">Select</option><option value="science">science</option><option value="english">english</option></select>
<select class="form-control" required="" name="subject[]"><option value="" selected="selected">Select</option><option value="science">science</option><option value="english">english</option></select>
</form>
<script type="text/javascript">
function validate_forms() {
$('form.addclass input').each(function () {
if (name == 'name') {
$(this).rules('add', {
required: true
});
}
});
$('form.addclass select').each(function () {
var name = $(this).attr('name');
$(this).rules('add', {
required_select: true
});
});
$.validator.addMethod('required_select', function (value, element) {
return value > 0;
}, 'Please choose an option');
}
$("form#frmaddclass").validate({
submitHandler: function (form) {
..
});
<script>
$(function() {
$("form#frmaddclass").validate({
submitHandler: function(form) {
alert("form valid");
return false;
}
});
$('select').each(function() {
$(this).rules('add', {
messages: {
required: "custom select message"
}
});
});
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<form method="POST" action="http://localhost:8000/admin/add" accept-charset="UTF-8" class="form-horizontal addclass" id="frmaddclass" enctype="multipart/form-data" novalidate="novalidate">
<input class="form-control error" placeholder="Name" id="name" required="" name="name" type="text" value="" aria-invalid="true"><br/>
<select class="form-control" required="" name="status">
<option value="" selected="selected">Select</option>
<option value="active">active</option>
<option value="disabled">inactive</option>
</select><br/>
<select class="form-control" required="" name="subject[ETET][]">
<option value="" selected="selected">Select</option>
<option value="science">science</option>
<option value="english">english</option>
</select><br/>
<select class="form-control" required="" name="subject[ETET][]">
<option value="" selected="selected">Select</option>
<option value="science">science</option>
<option value="english">english</option>
</select>
<select class="form-control" required="" name="subject[ETET][]">
<option value="" selected="selected">Select</option>
<option value="science">science</option>
<option value="english">english</option>
</select>
<br/>
<input type="submit" />
</form>Now issue is when i add required to the input and select field then only the form is validated, but when i select any option then the error should be removed but validation error is there after i select value. I dont't want to add required to the fields for validation.
required=""attribute on the fields will force the plugin to make those fields required, which you say you do not want - without even explaining why you don't want. Your custom rule for theselectelement makes no sense since it's already the default behavior of therequiredrule on aselect. Finally, the name attribute must be unique on every field. You cannot have two or more fields withsubject[]... they must contain an index or the validation plugin is only going to validate the first one.changeevent handler: jsfiddle.net/zrajd8vw/1