jQuery Reducing iterations in validation code

Question

I written an application that allows users to enter their personal and payment details.

I have a number of validation checks on the majority of the fields to ensure they are not blank and hope in the future to introduce other checks (e.g. numeric values only, no special characters)..

I look at my jQuery code, and it just seems i have gone about it in the long-winded way, using if else's. Here's my jQuery code using a sample of fields:

$(document).ready(function () {

$(".submitForm").click(function () {

    if ($("#Firstname").val() == '') {
        $("#Firstname").addClass("highlight");
    } else {
        $("#Firstname").removeClass("highlight");
    }

    if ($("#Surname").val() == '') {
        $("#Surname").addClass("highlight");
    } else {
        $("#Surname").removeClass("highlight");
    }

    if ($("#email").val() == '') {
        $("#email").addClass("highlight");
    } else {
        $("#email").removeClass("highlight");
    }

    if ($("#confirmemail").val() == '') {
        $("#confirmemail").addClass("highlight");
    } else {
        $("#confirmemail").removeClass("highlight");
    }

    ......
    ......

    $("#PersonalDetailsRequired").removeClass("visuallyhidden ");
    //document.forms[0].submit();
});
});

Is there a more efficient way of writing this?

Here's my jFiddle: http://jsfiddle.net/oampz/G3ccb/5/

Also, PersonalDetailsRequired seems to always be appear even if ALL the fields have a value in them.

Thanks

UPDATE:

Uploaded a new fiddle here - http://jsfiddle.net/oampz/P9eKZ/1/

What i'm trying to do is for the #PersonalDetailsRequired and #AddressDetailsRequired to only show if their respective fields are not filled in..

Thanks

Manoj · Accepted Answer · 2014-01-30 11:33:18Z

1

Try this code:

DEMO

$(document).ready(function () {
    $(".submitForm").click(function () {
        $("input").each(function(){
            if($(this).val() == '')
            $(this).addClass("highlight");
            else 
            $(this).removeClass("highlight");       
        $("#PersonalDetailsRequired").removeClass("visuallyhidden ");
        //document.forms[0].submit();
        });
    });
});

answered Jan 30, 2014 at 11:33

Manoj

1,8881 gold badge13 silver badges25 bronze badges

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

5 Comments

Oam Psy Over a year ago

thanks, this makes sense for validating every field on my page.. But there are some fields which don't require validation and can be left blank.

Oam Psy Over a year ago

Also, PersonalDetailsRequired seems to always be appear even if ALL the fields have a value in them.

Manoj Over a year ago

validation of the particular fields, use class name ...try jsfiddle.net/manojmcet/X6nTq/1 ...here surname not validate.

Oam Psy Over a year ago

Thanks! Uploaded a new fiddle here - jsfiddle.net/oampz/P9eKZ/1 What i'm trying to do is for the #PersonalDetailsRequired and #AddressDetailsRequired to only show if their respective fields are not filled in..

Oam Psy Over a year ago

Thanks, i can understand what you have done creating new CSS classes but i was under the impression we should reuse classes wherever possible. See new fiddle: jsfiddle.net/oampz/P9eKZ/4

Bhojendra Rauniyar · Accepted Answer · 2014-01-30 11:38:31Z

1

You can use each method:

$('form input').each(function(){
  if($(this).val()==''){
    $(this).addClass('highlight');
  } else {
    $(this).removeClass('highlight');
  }
});

As per your comment you can use not selector like this:

$(this).not('your_selector_not_to_validate').val()==''

edited Jan 30, 2014 at 11:38

answered Jan 30, 2014 at 11:31

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

2 Comments

Oam Psy Over a year ago

thanks, this makes sense for validating every field on my page.. But there are some fields which dont require validation and can be left blank.

Oam Psy Over a year ago

Thanks! Uploaded a new fiddle here - jsfiddle.net/oampz/P9eKZ/1 What i'm trying to do is for the #PersonalDetailsRequired and #AddressDetailsRequired to only show if their respective fields are not filled in..

pomaxa · Accepted Answer · 2014-01-30 11:39:09Z

1

For example, you can use toggleClass method in jquery, instead of if/else; and each to walk through form elements like:

$('form input.MyCoolSelectoForValidation').each(function(){
    $(this).toggleClass('highlight', ($(this).val()==''));
});

demo: http://jsfiddle.net/G3ccb/7/

UPD: and same way you can apply to your code for displaying error msg:

$("#PersonalDetailsRequired").toggleClass('visuallyhidden', $('.highlight').length < 1);

edited Jan 30, 2014 at 11:39

answered Jan 30, 2014 at 11:32

pomaxa

1,74616 silver badges26 bronze badges

2 Comments

Oam Psy Over a year ago

thanks, this makes sense for validating every field on my page.. But there are some fields which don't require validation and can be left blank.

pomaxa Over a year ago

than change selector to more specific

Manish Singh · Accepted Answer · 2014-01-30 11:42:04Z

0

The efficient way will be to use HTML5 validation, need not to add script for this:

Here are three pragmatic (but not globally perfect) examples:

Strong password:

input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,}" required

Email address:

input type="text" title="email" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}"

Phone number:

input type="text" required pattern="(+?\d[- .]*){7,13}" title="international, national or local phone number"

answered Jan 30, 2014 at 11:42

Manish Singh

1461 bronze badge

1 Comment

Oam Psy Over a year ago

this makes no sense - do you have a working example?

Collectives™ on Stack Overflow

jQuery Reducing iterations in validation code

4 Answers 4

5 Comments

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related