CODEWITHSUNDEEP
jqueryvalidation
Robbert
Robbert

Reputation: 1330

jQuery Form Validation for more fields

I am using the following jQuery code for validating my form fields. But this code is only for 2 fields, and I have many more fields to go in my website. Is there a way to simplify this for more fields?

// Input validation
var wz_form1 = $('#wz_form1');
var wz_width = $('#wz_width');
var wz_height = $('#wz_height');

wz_width.blur(vld_wz_width);
wz_height.blur(vld_wz_height);

wz_form1.submit(function() {
    if(vld_wz_width() & vld_wz_height() ) {
        return true;
    }else{
        return false;   
    }
});

function vld_wz_width() {
    if(wz_width.val().length < 1) {
        wz_width.addClass('red_border');
        return false;
    } else{
        wz_width.removeClass('red_border');
        return true;

    }
}

function vld_wz_height() {
    if(wz_height.val().length < 1) {
        wz_height.addClass('red_border');
        return false;
    } else{
        wz_height.removeClass('red_border');
        return true;

    }
}

My last update: 

var wz_form = $('#wz_form1');
$(wz_form).submit(function() {

    function wz_validation() {
        var txtboxes=$('input[validate="true"]');
        for(var i=0;i<txtboxes.length;i++) {

            if($(txtboxes[i]).val()=="") {
                $(txtboxes[i]).addClass('red_border');
                return false;
            }
            else{
                $(txtboxes[i]).removeClass('red_border');
                return true;
            }
        }
    }

    if(wz_validation()) {
        return true;    
    }
    else{
        return false;   
    }

});

Upvotes: 0

Views: 63

Answers (3)

user3106759
user3106759

Reputation: 423

If your fields have ids that contain a common string like _width, you can use ON() like the following to attach validations:

$("input[id~='_width']").on("blur", vld_wz_width);
$("input[id~='_height'").on("blur", vld_wz_height);

Upvotes: 0

gulshanm01
gulshanm01

Reputation: 195

if you are using type=text then you can use the following code

$(btnSubmit).click(function()
{
var txtboxes=$('input[type="text"]');
for(var i=0;i<txtboxes.length;i++)
{
if($(txtboxes[i]).val()=="")
$(txtboxes[i]).addClass('red_border');
else
$(txtboxes[i]).removeClass('red_border');
}
});

Upvotes: 1

Ahmed Ali
Ahmed Ali

Reputation: 1007

If you require a Non blank validation you can use :

// Input validation
var wz_form1 = $('#wz_form1');
var wz_width = $('#wz_width');
var wz_height = $('#wz_height');
var wz_field1 = $('#wz_field1'); //Add new fields
var wz_field2 = $('#wz_field2');
//..... add all the required fields


wz_width.blur(vld_wz_width);
wz_height.blur(vld_wz_height);

wz_form1.submit(function() {
    if(vld_wz_width() & vld_wz_height() & vld_wz_field1 & vld_wz_field2 /* & so on ...*/ ) {
        return true;
    }else{
        return false;   
    }
});

function vld_wz_width() {
    if(wz_width.val().length < 1) {
        wz_width.addClass('red_border');
        return false;
    } else{
        wz_width.removeClass('red_border');
        return true;

    }
}

function vld_wz_height() {
    if(wz_height.val().length < 1) {
        wz_height.addClass('red_border');
        return false;
     } else{
        wz_height.removeClass('red_border');
        return true;

    }
}

 function vld_wz_fields() {
    if(wz_field1.val().length < 1) {
        wz_field1.addClass('red_border');
        return false;
     } else{
        wz_field1.removeClass('red_border');
        return true;

    }
}

 function vld_wz_fields() {
    if(wz_field2.val().length < 1) {
        wz_field2.addClass('red_border');
        return false;
     } else{
        wz_field2.removeClass('red_border');
        return true;

    }
}

//and so on ...

and if you're familiar with html5, you can only add required property on the form fields, this will do automatic form validation

Upvotes: 0

Related Questions