show form errors using jquery

Question

would like to show all errors on the right of a form when user makes input error. Example if user enters incorrect e-mail format. I have created the div but I am not able to correctly display the errors and remove them as soon as the user corrects the input. Till now I am just highlighting the textbox using the error id.

jquery:

    var form = $("#contact_form");
var name = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var message = $("#message");
var messageInfo = $("#messageInfo");
var note = $("#note");

name.blur(validateName);
email.blur(validateEmail);
message.blur(validateMessage);


form.submit(function(){
    if(validateName() & validateEmail() & validateMessage()){
        return true;
    }else{
        return false;
    }
});


function validateName(){
    if(name.val().length < 5){  
        name.addClass("error");
        return false;

    }else{

        name.removeClass("error");
        return true;

    }

}

Have you tried any form validator plugin?

Tejasva Dhyani
– Tejasva Dhyani

2013-01-02 10:29:56 +00:00
Commented Jan 2, 2013 at 10:29 — Tejasva Dhyani
– Tejasva Dhyani, Commented Jan 2, 2013 at 10:29

bipen · Accepted Answer · 2013-01-02 10:32:16Z

2

i recommened you to use plugins rather that creating your own...

jquery validation plugin

all the things that you wanted in your form is already done ... easy to use and modify..

answered Jan 2, 2013 at 10:32

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

1 Comment

bipen Over a year ago

links for the tutorial..jquery4u.com/forms/basic-jquery-form-validation-tutorial

Edwin Alex · Accepted Answer · 2013-01-02 10:42:39Z

0

You could use like this..

function validateName(){
    if(name.val().length < 5){  
        $("#nameError").html("Name should contain atleast 5 characters");
        name.addClass("error");
        return false;

    }else{
        $("#nameError").html("");
        name.removeClass("error");
        return true;

    }

}

nameError is an ID of the DIV you have created to show the error..

On name field keyDown event, just clear the error msg like this..

$("#nameError").html("");

answered Jan 2, 2013 at 10:42

Edwin Alex

5,0964 gold badges31 silver badges51 bronze badges

1 Comment

user1347219 Over a year ago

you gave me the idea that I can create a separate div for each error next to each textbox and fill it up or remove it as necessary.

Collectives™ on Stack Overflow

show form errors using jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related