views:

52

answers:

1

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>
+3  A: 

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.

Nick Craver
thanks Nick, but it only catches the first input and not the other ones.
FALCONSEYE
@FALCONSEYE - That shouldn't be the case, it'll add to all of them *if* they match your selector, can you post your markup?
Nick Craver
Nick, i just edited my original post to include all the code.
FALCONSEYE
@FALCONSEYE - My fault, `.rules()` only affects the first element of the set, a `.each()` loop will fix this...answer updated with a demo to see it in action.
Nick Craver
sweet. thanks for the help!
FALCONSEYE