CODEWITHSUNDEEP
javascriptjqueryformsvalidation
Gihanmu
Gihanmu

Reputation: 407

How to reuse one jquery validate function in all my web forms?

I am working on a web based project (final project) and it has so many forms to capture client's data. Each form has different fields. For example in the sign-up form there can be fields like username, password but in another form there are fields like monthly income, DOB etc.

I need to maintain a common JS file which will perform all these validations.

$(function() {

    $("form").submit(function() {
        //removing errors appeared in early submissions
        $("span.error").remove();
        var abort = false;
        //looping through all the input fields
        $(":input").each(function() {
            //If the input value is empty display an error
            if ($.trim($(this).val()) === "") {
                $(this).after("<span class='error'>This field cannot be empty</span>");
                abort = true;
            }


        }); 


        if (abort) {
            //this will avoid form submission if there are errors
            return false;
        } else {
            return true;
        }
    });


});

This is my validate function, this will ensure that a field in any form will not be left blank. All I have to do is call JS file externally (with jquery library).

I don't know how do I adjust the same function which can be used for validations such as minimum length, max length, preg-match etc. The problem is that all the fields do not need to be validated for min, max lengths. Only specific fields need to be validated.

How do I handle this situation? Do I have to write specific validations for each and every form?

Note :- I am not supposed to use jquery validate plugin

Upvotes: 0

Views: 1205

Answers (3)

redmoon7777
redmoon7777

Reputation: 4526

there are a few different was to go. The way I do it is be using an attribute in my fields data-*.

example for a required field with min length of 3 and max length of 10 :

<input type="text" name="bla" data-is_required="true" data-min_length="3" data-max_length="10" />

This allows you to do something like 

if($('#id').attr('data-min_length')) {
    // ....
}

This will make it easier to generate them automatically with you backend language so that your bankend and front-end validations stay in sync

EDIT

Here is how you use it in your example:

$(":input").each(function() {
    if ($(this).attr('data-is_required') == "true" && $.trim($(this).val()) === "") {
        $(this).after("<span class='error'>This field cannot be empty</span>");
        abort = true;
    }    
});

Upvotes: 1

Bismarck
Bismarck

Reputation: 96

My suggestion would be to narrow validation in field types i.e., for a textfield you will want non-blank, min, max etc. , for a password you may want atleast one uppercase, etc.

You can make a class foe each validation type you want to use and just add the classes accordingly.

That's the most maintainable and adaptable way I can think of

Upvotes: 1

Adam
Adam

Reputation: 6733

Depends on how you want to specify the validation. You can add classes to your fields which you check for in the validate function and treat that field differently depnding on the class. You can also check other properties of the fields such as max/min and data-* properties.

However, I know you said you are not supposed to use jQuery validate plugin, but you might want to try and revisit that. As your question stands you are likely to end up simply replicating/writing your own version of the validate plugin, so why not use the one that already exists and works pretty well?

Upvotes: 0

Related Questions