[英]Dynamic form field validation using jquery AND Rules
This question is an extension of my SO question: 这个问题是我的SO问题的延伸:
jQuery to disable/enable textarea depending on which radio button is selected inside of loop jQuery根据循环内选择的单选按钮禁用/启用textarea
I'm using the jQuery bassistance validation plugin ( http://bassistance.de/jquery-plugins/jquery-plugin-validation/ ). 我正在使用jQuery bassistance验证插件( http://bassistance.de/jquery-plugins/jquery-plugin-validation/ )。
The validation rule I'm trying to create is if a radio button equals 'yes', then make the textarea a required field. 我试图创建的验证规则是,如果单选按钮等于“是”,则将textarea设为必填字段。 My ID's and form field names for the radio and textarea boxes are dynamic but begin with the same word so I can use name^='travel'
收音机和textarea框的我的ID和表单字段名称是动态的,但以相同的单词开头,所以我可以使用name^='travel'
HTML UPDATED HTML 更新
<div class="controls">
<label class="radio inline">
<input type="radio" name="travel_1" data-travelNumber="1" id="travel_yes_1" value="Yes" tabindex="25" >
Yes </label>
<label class="radio inline">
<input name="travel_1" type="radio" data-travelNumber="1" id="travel_no_1" value="No" tabindex="26" checked >
No </label>
</div>
<div class="controls" id="Answer_travel_yes_1">
<textarea name="travelDetails_1" id="travelDetails_1" ></textarea>
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="travel_2" data-travelNumber="2" id="travel_yes_2" value="Yes" tabindex="25" >
Yes </label>
<label class="radio inline">
<input name="travel_2" type="radio" data-travelNumber="2" id="travel_no_2" value="No" tabindex="26" checked >
No </label>
</div>
<div class="controls" id="Answer_travel_yes_2">
<textarea name="travelDetails_2" id="travelDetails_2"></textarea>
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="travel_3" data-travelNumber="3" id="travel_yes_3" value="Yes" tabindex="25" >
Yes </label>
<label class="radio inline">
<input name="travel_3" type="radio" data-travelNumber="3" id="travel_no_3" value="No" tabindex="26" checked >
No </label>
</div>
<div class="controls" id="Answer_travel_yes_3">
<textarea name="travelDetails_3" id="travelDetails_3"></textarea>
</div>
jQuery jQuery的
// I use this to hide/show the travelDetails textarea (show on yes, hide on no)
$('input:radio[name^="travel"]:checked').live('click',function(){
var id = $(this).attr("id").split("_");
id = id[id.length-1];
$("#travelDetails_" + id).attr("disabled", !($(this).val() == "Yes"));
if ( $(this).val() == 'Yes' )
$('#Answer_travel_yes_' + id).slideDown();
else
$('#Answer_travel_yes_' + id).slideUp();
});
$("#TravelForm").validate({
rules:{
whatgoeshere:{
required: function(){
if ( $("input:radio[name^=travel]:checked").val() == "Yes" ){
// make travel
true
}
else{
console.log('false');
true
}
},
minlength: 10 // needs to have at least 10 characters entered (if the corresponding radio is Yes
}
},
messages:{
whatgoeshere:{
required:"Please enter your travel details",
minlength:"Please enter at least 10 characters"
}
},
errorClass: "help-inline",
errorElement: "span",
highlight:function(element, errorClass, validClass) {
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('error');
// $(element).parents('.control-group').addClass('success');
}
});
This is a generic answer which you can apply into your code... 这是一个通用答案,您可以将其应用到您的代码中......
I am fairly certain you cannot use a function inside the rules
option. 我相当肯定你不能在rules
选项中使用一个函数。 As per documentation , rules:
need to be "key/value pairs", unless using the depends
property. 根据文档 , rules:
需要是“键/值对”,除非使用depends
属性。
rules: {
mytextarea: {
minlength: 10,
required: {
depends: function(element) {
return $("#myradio:checked")
}
}
}
},
messages: {
mytextarea: {
required: "Please enter your travel details",
minlength: "Please enter at least 10 characters"
}
}
mytextarea
would be the value
of the name
attribute of your textarea
. mytextarea
将是textarea
的name
属性的value
。
<textarea name="mytextarea"></textarea>
Alternatively... 另外...
Apply jQuery .validate()
rules dynamically. 动态应用jQuery .validate()
规则。
First initialize your .validate()
plugin with options: 首先使用选项初始化.validate()
插件:
$('form').validate({
// your options, leave out the rule in question
});
Create a rules array (note the slightly different format when using messages
): 创建规则数组(注意使用messages
时格式略有不同):
var myrule = {
required: true,
minlength: 10,
messages: {
required: "Please enter your travel details",
minlength: "Please enter at least 10 characters"
}
}
Then within your conditional, target the textarea
as required: 然后在条件内,根据需要定位textarea
:
if ($(this).val() == 'Yes') {
$('[name^="travel"]').rules('add', myrule);
} else {
$('[name^="travel"]').rules('remove', myrule);
}
http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules
BTW, .live()
has been deprecated in favor of .on()
. BTW, .live()
已被弃用,转而使用.on()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.