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."
);
$('#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:
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.