jquery 使用选择框进行表单验证
jquery formvalidation with selectbox
我正在使用这个插件formValidation我的问题是,如果我在选择框中选择值 3,我只想触发必填字段(年龄、姓名、年),这 3 个字段将是 required.How 在表单验证中做到这一点?
<form name="myform">
<div class='form-group'>
<label>Type</label>
<div>
<select class='form-control' name='type' id='type'>
<option value ='1'> 1 </option>
<option value ='2'> 2 </option>
<option value ='3'> 3</option>
<option value ='4'> 4 </option>
</select>
</div>
</div>
<div class="form-group">
<label for="age">age</label>
<input type="text" class="form-control" id="age" name="age">
</div>
<div class="form-group">
<label for="name">name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="year">age</label>
<input type="text" class="form-control" id="year" name="year">
</div>
</form>
这是我的js
$('#myform').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
year: {
validators: {
notEmpty: {
message: 'The year is required'
}
}
},
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
age: {
validators: {
notEmpty: {
message: 'The age is required'
}
}
}
}
});
提前致谢。
您可以使用 enableFieldValidators
方法来启用和禁用字段的验证器。
首先,您必须使用选项 enabled
设置为 false
[=39= 来禁用您字段的所有验证器],然后当您 select 您的 select 框的值 3 时,启用它们。
见以下代码:
$(document).ready(function () {
$('#myform').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
year: {
// Disable the validators of the field 'year'
enabled: false, // <==
validators: {
notEmpty: {
message: 'The year is required'
}
}
},
name: {
// Disable the validators of the field 'name'
enabled: false, // <==
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
age: {
// Disable the validators of the field 'age'
enabled: false, // <==
validators: {
notEmpty: {
message: 'The age is required'
}
}
}
}
});
});
$('#type').on('change', function (e) {
if (parseInt($('#type').val(), 10) === 3) {
// Enable the validators of your fields
// 'age', 'name' & 'year'
$('#myform').data('formValidation').enableFieldValidators('age', true);
$('#myform').data('formValidation').enableFieldValidators('name', true);
$('#myform').data('formValidation').enableFieldValidators('year', true);
} else {
// Disable them again
$('#myform').data('formValidation').enableFieldValidators('age', false);
$('#myform').data('formValidation').enableFieldValidators('name', false);
$('#myform').data('formValidation').enableFieldValidators('year', false);
}
});
工作示例:
参考文献:
enabled
选项的文档:http://formvalidation.io/settings/#field-enabled
enableFieldValidators
方法文档:http://formvalidation.io/api/#enable-field-validators
我正在使用这个插件formValidation我的问题是,如果我在选择框中选择值 3,我只想触发必填字段(年龄、姓名、年),这 3 个字段将是 required.How 在表单验证中做到这一点?
<form name="myform">
<div class='form-group'>
<label>Type</label>
<div>
<select class='form-control' name='type' id='type'>
<option value ='1'> 1 </option>
<option value ='2'> 2 </option>
<option value ='3'> 3</option>
<option value ='4'> 4 </option>
</select>
</div>
</div>
<div class="form-group">
<label for="age">age</label>
<input type="text" class="form-control" id="age" name="age">
</div>
<div class="form-group">
<label for="name">name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="year">age</label>
<input type="text" class="form-control" id="year" name="year">
</div>
</form>
这是我的js
$('#myform').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
year: {
validators: {
notEmpty: {
message: 'The year is required'
}
}
},
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
age: {
validators: {
notEmpty: {
message: 'The age is required'
}
}
}
}
});
提前致谢。
您可以使用 enableFieldValidators
方法来启用和禁用字段的验证器。
首先,您必须使用选项 enabled
设置为 false
[=39= 来禁用您字段的所有验证器],然后当您 select 您的 select 框的值 3 时,启用它们。
见以下代码:
$(document).ready(function () {
$('#myform').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
year: {
// Disable the validators of the field 'year'
enabled: false, // <==
validators: {
notEmpty: {
message: 'The year is required'
}
}
},
name: {
// Disable the validators of the field 'name'
enabled: false, // <==
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
age: {
// Disable the validators of the field 'age'
enabled: false, // <==
validators: {
notEmpty: {
message: 'The age is required'
}
}
}
}
});
});
$('#type').on('change', function (e) {
if (parseInt($('#type').val(), 10) === 3) {
// Enable the validators of your fields
// 'age', 'name' & 'year'
$('#myform').data('formValidation').enableFieldValidators('age', true);
$('#myform').data('formValidation').enableFieldValidators('name', true);
$('#myform').data('formValidation').enableFieldValidators('year', true);
} else {
// Disable them again
$('#myform').data('formValidation').enableFieldValidators('age', false);
$('#myform').data('formValidation').enableFieldValidators('name', false);
$('#myform').data('formValidation').enableFieldValidators('year', false);
}
});
工作示例:
参考文献:
enabled
选项的文档:http://formvalidation.io/settings/#field-enabledenableFieldValidators
方法文档:http://formvalidation.io/api/#enable-field-validators