Multiple field validation based on other field

Question

My set up is that I have one field called claimaint_rep, now when that value is Yes I want to have multiple fields become required. Now I'm using jquery validate. My code currently is:

 $('#aspnetForm').validate({
        errorPlacement: function (error, element) { },

        rules:
                {
                    claimsol:
                        {
                            required: function (element) {
                                return $("#ctl00_ContentPlaceHolder1_claimant_rep").val() == "Yes";
                            },
                            minlength: 2
                        }

                },

        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            $(element).closest('.control-group').removeClass('error').addClass('success');
        }
    });

Example HTML:

<div class="control-group">
    <label class="control-label" for="inputEmail">Reference Number</label>
    <div class="controls">      
        <asp:TextBox ID="solicitor_reference" CssClass="span3 claimsol" runat="server"></asp:TextBox>
    </div>
  </div>

The field naming is due to it being an ASP Webform (ugh), now from what it seems like that the claimsol rule will only apply to one field with an name of claimsol? I want to apply that rule to multiple fields, ideally without having to set each on in the rules section. What am I missing here?

score 2 · Accepted Answer · edited May 23 '17 at 12:28

Quote OP:

I want to apply that rule to multiple fields, ideally without having to set each one in the rules section.

I really have no idea what you're ultimately trying to achieve, but there are only a couple of methods that can apply rules in bulk.

1) rules('add') method for dynamically adding rules to a jQuery target selector. If the selector targets multiple fields, you must wrap this method inside an .each().

$('[name*="field"]').each(function() {
    $(this).rules('add', {
        required: true,
        number: true,
        messages: { // optional custom messages
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});

The various ways to implement this are limitless.

See: https://stackoverflow.com/a/15116062/594235

2) addClassRules() method for creating a class name that represents your compound rule. (However, over-riding the default error messages is not as simple as in item #1).

$.validator.addClassRules("myclass", {
    required: true,
    minlength: 2
});

You must also add that class name to each input that needs to use that rule.

<input type="text" class="myclass" name="field" />

DEMO: http://jsfiddle.net/62uua/

3) Or you can create a whole new rule based on your dependency function using the addMethod() method.

$.validator.addMethod("myrule", function(value, element) { 
    // your function
    // return false triggers the error
    // return true passes validation
}, "Custom message");

See the documentation for all available methods and usage: http://docs.jquery.com/Plugins/Validation

EDIT:

If you're trying to suppress error messages, do not pass an empty callback function like you did here,

errorPlacement: function (error, element) { },

pass a return false instead,

errorPlacement: function (error, element) { 
    return false;  // suppress default error message placement
},

Where within that code would either of those be inserted, I saw the 2) item after posting the question but it doesn't sit within the validation block I've written? — Ryan McDonough, Apr 16 '13 at 14:18
@RyanMcDonough, item 2 would go anywhere inside the document ready. You would still need to initialize the plugin with `.validate()`. — Sparky, Apr 16 '13 at 14:20
Ah right, thanks for the note regarding the error message suppression too. Great answer. — Ryan McDonough, Apr 16 '13 at 14:24

Multiple field validation based on other field

1 Answers1