jQuery validate and rules
I am having a little bit trouble with the following. I have multiple form fields starting with "vendorName-" ending with a number. I would like to add a rule to the validate for these fields but I am not sure how to.
Here is what I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="javascript/jquery-1.4.js"></script>
<script type="text/javascript" src="javascript/jquery.validate.js"></script>
<script type="text/javascript" src="javascript/jquery.form.js" ></script>
<script>
$().ready(function() {
$.validator.addMethod(
"findRegex",
function(value, element) {
return /^.+::[1-9]\d{0,11}$/.test(value);
},
"Please check your input."
);
$开发者_如何学Go('#myForm').validate({
submitHandler: function(form){
$("#formSub").html('<table style="font-size:11px; color:#333;"><tr><td><img border="0" src="images/ajax-loader.gif"/></td><td>Saving! Please wait...</td></table>');
var options = {
success: showResponse,
url:'save.cfm'
};
$('#myForm').ajaxSubmit(options);
return false;
}
});
showResponse = function(responseText, statusText) {
$("#formSub").html(responseText);
}
$(":input[name^='vendorName-']").rules("add", { findRegex: true }); // $('input[name^=vendorName]').
});
</script>
</head>
<body>
<form id="myForm" name="myForm" method="post" action="">
<select name="vendorName-1" id="vendorName-1">
<option value=""></option>
<option value="acme inc::30">acme inc::30</option>
<option value="my company::54781">my company::54781</option>
<option value="abc llc::42443">abc llc::42443</option>
<option value="zzzz">zzzz</option>
</select>
<hr/>
<select name="vendorName-2" id="vendorName-2">
<option value=""></option>
<option value="acme inc::30">acme inc::30</option>
<option value="my company::54781">my company::54781</option>
<option value="abc llc::42443">abc llc::42443</option>
<option value="zzzz">zzzz</option>
</select>
<hr/>
<select name="vendorName-3" id="vendorName-3">
<option value=""></option>
<option value="acme inc::30">acme inc::30</option>
<option value="my company::54781">my company::54781</option>
<option value="abc llc::42443">abc llc::42443</option>
<option value="zzzz">zzzz</option>
</select>
<hr/>
<select name="vendorName-4" id="vendorName-4">
<option value=""></option>
<option value="acme inc::30">acme inc::30</option>
<option value="my company::54781">my company::54781</option>
<option value="abc llc::42443">abc llc::42443</option>
<option value="zzzz">zzzz</option>
</select>
<hr/>
<select name="vendorName-5" id="vendorName-5">
<option value=""></option>
<option value="acme inc::30">acme inc::30</option>
<option value="my company::54781">my company::54781</option>
<option value="abc llc::42443">abc llc::42443</option>
<option value="zzzz">zzzz</option>
</select>
<hr/>
<input type="submit" name="btnSave" id="btnSave" value="Save"/>
<hr/>
<div id="formSub"></div>
</form>
</body>
</html>
You can add the rules dynamically based on the selector, like this:
$('#myForm').validate({
submitHandler: function(form){
...
}
});
$(":input[name^='vendorName-']").each(function() {
$(this).rules("add", { findRegex: true });
});
You can give it a try here.
It's important that you call .rules() after .validate() so the validator itself it setup and ready. Also you have to use a .each() here, since .rules() only runs against the first element of the matched set.
加载中,请稍侯......
精彩评论