jQuery multiple form validation

Question

I have multiple forms in different page, Is there a way to write a single function which would take care of validation or should i write code for each form separately.

$(document).ready(function () {   
    $('#fvujq-form1').validate();
    $('#fvujq-form2').validate();
});

Note: Each form has its own rules.

Update:

$("form").each(function () {
        $(this).validate({

            rules: {

                username: {
                    required: true
                },
                password: {
                    required: true
                },
                name: {
                    required: true,                        
                },
                cperson: {
                    required: true,                       
                }
            },
            submitHandler: function (form) {
                return false; //temporarily prevent full submit
            }
        });
    });

Now the username and password of different form and name and person is of different form in different page. Is it right to proceed in this way of having a common form submission.

if each form has different rules then it is best to use different code — Arun P Johny
– Arun P Johny, Commented May 12, 2014 at 12:58
I wouldn't take this approach. I would simply go through the inputs, determine that type of data we expect and check that it's there (or not there if you have optional fields) leave checking that all the right fields are present to the server-side validation. The reason for this is that it is trivially easy to circumvent client-side JavaScript form validation. (see my answer) — nettux
– nettux, Commented May 12, 2014 at 13:36

Prisoner · Accepted Answer · 2014-05-12 13:02:44Z

2

You should test using $('form').validate();, if that doesn't work, then use:

$('form').each(function(){
    $(this).validate();
});

answered May 12, 2014 at 13:02

Prisoner

27.7k11 gold badges78 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

delliottg Over a year ago

This approach has worked for me, but I'm finding that I'm falling into the separate validation per form camp. The rules and methods you may end up adding to make validation work for one form, can negatively influence other forms. This has been particularly onerous with regard to groups of checkboxes for me. I'm going to refactor my HTML / JS into separate validation schemes, rules, messages, etc., instead of trying to do it all in a single validation.

stripthesoul · Accepted Answer · 2014-05-12 13:49:05Z

2

You can use the $("form") selector to validate all elements of type form if that's what you are asking for. I would not recommend that specifically for a page with multiple forms though.

edited May 12, 2014 at 13:49

answered May 12, 2014 at 12:59

stripthesoul

3701 silver badge8 bronze badges

3 Comments

theJava Over a year ago

I am using that, will it work if the rules are different for two forms.

stripthesoul Over a year ago

I would think it would, however if you have multiple forms on one page, it would validate them all at once, I don't know if that is something you would like to have.

stripthesoul Over a year ago

I believe this can get tricky specifically if you have multiple forms on your page, check this JSfiddle for you to test : jsfiddle.net/XXm2R/1

nettux · Accepted Answer · 2014-05-12 13:39:41Z

If you can give each input element in your form a custom xx-field-type attribute eg:

<input type='text' xx-field-type='email'/>

You could use:

jQuery.fn.extend({
    validate: function() {
        var input_list = this.find("input");
        for (var i = 0; i < input_list.length; i++) {
            switch(input_list[i].attr("xx-field-type")) {
                case 'username':
                    var value = input_list[i].val();
                    if (value.match(/^[a-z0-9]+$/) != true) {
                        return false;
                    }
                    break;
                case 'password':
                    var value = input_list[i].val();
                    if (value.match(/[a-z]+/) != true 
                        || value.match(/[A-Z]+/) != true
                        || value.match(/[0-9]+/) != true) {
                        return false;
                    }
                    break;
                case 'email':
                    var value = input_list[i].val();
                    if (value.match(/^[a-z0-9]+@[a-z0-9]$/) != true) {
                        return false;
                    }
                    break;
                default:
                    continue;
            }
        }
        return true;
    }
});

This would go through each input field of a form, check the value of it's xx-field-type attribute and use that to choose the rules that the value must match. Returns false if any fail otherwise returns true.

If you can't add custom attributes you could use classes but it feels hacky to denote form type using an attribute intended for setting display related stuff.

Untested

the field types I've used and the regexps are just for the purposes of demonstration.

Collectives™ on Stack Overflow

jQuery multiple form validation

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related