Jquery Validations

Jquery is very strong framework to do such kind of tasks/operations. Today we will see how can we simply validate a form using custom jquery code. There is also validation plugins available in market like “validate.js” and so on.. ofcource we will also see this “validate.js” plugin validation in our future posts but now we will focus on custom jquery validations.
Below i have made one booking form which has saveral fields like selectbox, textbox, checkbox with validations.

Required validations to all same fields

I have added required validation to all same fields in a loop using “each” event of jquery. You can see below types of field I have validated.

var error = 0;

// Required validations
var fields = {
user_firstname:$("#user_firstname").val(),
user_lastname:$("#user_lastname").val(),
user_email: $("#user_email").val(),
user_phone: $("#user_phone").val(),
user_country: $("#user_country").val(),
};

$.each(fields, function(propName, propVal) {
    if ($("#" + propName).val() == "") {
        error++;
        $("#" + propName + "_msg").text("Required");
    } else {
        $("#" + propName + "_msg").text("");
    }
});

// checkbox validation terms and conditions
if (!($('#user_terms_conditions').is(':checked'))) {
    error++;
    $("#user_terms_conditions_msg").text("Please select terms and conditions before booking").css({
        "color": "red",
        "text-align": "right",
        "width": "100%"
    });
} else {
    $("#user_terms_conditions_msg").text("");
}
  • First I have one jquery array of all fields which i want to set as required validations and notice that i have used same id of fields as a array key name. So i can use that each field key dynamically to perform validation and pass required message.
  • After that i have used each event and pass that array to event as first parameter with callback function which is having propName (key) & propVal (value).
  • I have declare one variable called “error” which has 0 set as value.
  • Then inside of each i have checked each field has value or not. If its empty then error will increment by 1 every time and passed “required” message to span of that particular field.
  • But for checkbox i have validated it separately, as it can validate by “.is(‘checked’)” event.
  • Now at the end of the validation you can check error variable if it is greater than 0 then form submission will stoped and display validtions errors or else form will submit.

At least one field should select

In this case, i have checked all those select boxes should be not empty in one if conditions with “&&” (and) operator.

// Select atleast 1 from 3 field validation
if ($("#user_adults").val() == "0" && $("#user_childrens").val() == "0" && $("#user_infants").val() == "0") {
    error++;
    $("#user_adults").css("border", "1px solid red");
    $("#user_childrens").css("border", "1px solid red");
    $("#user_infants").css("border", "1px solid red");
    $("#seats_msg").text("Select atleast 1 seat for booking").css("padding", "5px");
} else {
    $("#user_adults").css("border", "1px solid #d4d4d4");
    $("#user_childrens").css("border", "1px solid #d4d4d4");
    $("#user_infants").css("border", "1px solid #d4d4d4");
    $("#seats_msg").text("").css("padding", "0px");
}

Conclusion :

As you can see, we have done jquery validation on booking form in very simple way, you can check demo below of this validation. In future posts, we will cover different validations techniques using custom jquery code, jquery libraries and php validations also. So stay connected with my blog to get useful stuff in simple manner, and i will be more happy to get some feedback from you in comment section, and also share this post if you like and if it is useful for others. Thanks. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *