Dynamically setting rules/messages objects for jQuery validation plugin

Question

I'm sure there's a better way to implement this but can't figure it out. I have a form which has 2 fields at the top that are always required. I then have a series of tabs which load in different fields when selected (separate chunks of HTML loading in, so that only what's currently in the DOM is submitted when the form submits). I'm using the jquery validation plugin ( http://docs.jquery.com/Plugins/Validation ) which allows you to set the validation rules/messages as an object when each set of new fields loads in, to remove redundant rules and add new ones as the fields change. Problem is the rules/messages objects all have to be written into the js for use when required and the file is long and it seems very inefficient. Here's my pseudocode:

<form>
    <input1 (always on page) />
    <input2 (always on page) />
    <ul id="nav-tabs">
        <li id="tab1"></li>
        <li id="tab2"></li>
        <li id="tab3"></li>
    </ul>
    <div id="dynamic-content">
        <!-- different form fields load in here from separate html files, all requiring different rules in addition to the 2 fields always on the page -->
    </div>
    <input type="submit" />
</form>

I'm thinking there might be some solution with loading in the rules with each chunk of HTML as it is set? Has anyone done anything like this?

Thanks to anyone who can help. T

Can you share your javascript that you would like help with? And setting up a jsfiddle of some of your form to test might help get some good answers too. — 3dgoo
– 3dgoo, Commented Jan 2, 2013 at 4:11
"Problem is the rules/messages objects all have to be written into the js" This phrase is confusing me. Everything has to be written into the js, why would configurations for validation be any different? — dclowd9901
– dclowd9901, Commented Jan 2, 2013 at 4:16

Sparky · Accepted Answer · 2013-01-02 18:55:39Z

Use the built-in rules() method to add rules. See documentation.

Note: You must call this method after you call .validate().

jsFiddle DEMO

$("#form").validate({
    // my other options
});

// the following method must come AFTER .validate()

$(".myClass").each(function() {
    $(this).rules('add', {
        required: true,
        minlength: 5
    });
});

The following to combine with custom messages:. Note that the format is slightly different than when adding rules as options within .validate()...

$(".myClass").each(function() {
    $(this).rules('add', {
        required: true,
        minlength: 5,
        messages: {
            required: "Required input",
            minlength: jQuery.format("At least {0} characters are necessary")
        }
    });
});

This method can also be very useful when you are dynamically adding fields to your form.

var myRule = {
    required: true,
    minlength: 5,
    messages: {
        required: "Required input",
        minlength: jQuery.format("At least {0} characters are necessary")
    }
}

$("#myform").append('<input type="text" name="four" /><br />');
$("[name='four']").rules('add', myRule);

jsFiddle Demo:

http://jsfiddle.net/kSFKE/10/

There is no need to use remove to remove rules if you're dynamically destroying the unneeded field inputs.

charlietfl · Accepted Answer · 2013-01-02 04:31:02Z

0

There is a rules() method also that has add and remove sub methods for dynamic rule changes

http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules

Example(from docs):

$("#myinput").rules("add", {
 minlength: 2
});

Many people don't realize the simplicity of classes on the fields also.

For straighforward rules that you would use a boolean in rules object , the same rule name used as a class will automatically register the field. Same holds true for any methods you create.

You might also consider using data- attributes to help modify rules when adding/removing elements. Can loop over new or old elements and use the data- attributes to parse into the rules() method

edited Jan 2, 2013 at 4:31

answered Jan 2, 2013 at 4:23

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

3dgoo · Accepted Answer · 2013-01-02 23:07:15Z

0

If it's just simple validation you need you can just use the class attribute on each input to validate it.

HTML

<input type="text" name="input1" class="required" />

Javascript

$("#Form").validate();

Demo

answered Jan 2, 2013 at 23:07

3dgoo

15.8k6 gold badges49 silver badges59 bronze badges

Comments

Sparky · Accepted Answer · 2014-10-01 15:49:52Z

-1

It was asked how to dynamically apply rules;

    <?php
    $form_rules = array(
    'user_login' => array(
    'required' => true,
    'minlength' => 4)
    );
    ?>

Then in the head of the page

    <script>
        $(document).ready(function() {
            $('#portal_reg').validate({ // form id 
                'rules': <?php echo json_encode($form_rules); ?>
            });
        });
    </script>

edited Oct 1, 2014 at 15:49

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

answered Jun 30, 2014 at 3:15

DeadlySinX

1

1 Comment

Sparky Over a year ago

The OP said nothing about using PHP.

Collectives™ on Stack Overflow

Dynamically setting rules/messages objects for jQuery validation plugin

4 Answers 4

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Related