CODEWITHSUNDEEP
jquerycsshtmlvalidation
Oam Psy
Oam Psy

Reputation: 8663

jQuery Reducing iterations in validation code

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

Upvotes: 0

Views: 74

Answers (4)

Manish Singh
Manish Singh

Reputation: 146

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"

Upvotes: 0

pomaxa
pomaxa

Reputation: 1746

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);

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

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()==''

Upvotes: 1

Manoj
Manoj

Reputation: 1890

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();
        });
    });
});

Upvotes: 1

Related Questions