javascript client side validation loop

Question

umm.. i would like to show users what they need to fill up if they did not fill their name, email or message.. example, they filled up their name but they did not filled up their email and message so an error will be display that they should fill up their email and message. my code here shows all errors even if they filled up their name.

function validate() {
    var myName = document.getElementById("inputName");
    var myEmail = document.getElementById("inputEmail");
    var filter = /^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
    var myMessage = document.getElementById("inputMessage");
    var isValid = true;

    if(myName.value == "") {
        var myNameError = document.getElementById("inputNameError");
        myNameError.innerHTML = "Please provide your name.";
        isValid = false;
    }

    if (!filter.test(myEmail.value)) {
        var myEmailError = document.getElementById("inputEmailError");
        myEmailError.innerHTML="Please provide your email.";
        isValid = false;
    }       

    if(myMessage.value == "") {
        var myMessageError = document.getElementById("inputMessageError");
        myMessageError.innerHTML = "Please provide your message.";
        isValid = false;
    }

    return isValid;
}

Drum roll - What is the problem?

Ed Heal
– Ed Heal

2013-08-11 08:45:13 +00:00
Commented Aug 11, 2013 at 8:45 — Ed Heal
– Ed Heal, Commented Aug 11, 2013 at 8:45
Does this happen the first time you try to validate?

Angelin
– Angelin

2013-08-11 08:50:16 +00:00
Commented Aug 11, 2013 at 8:50 — Angelin
– Angelin, Commented Aug 11, 2013 at 8:50

Angelin · Accepted Answer · 2013-08-11 08:53:21Z

1

You could give jQuery validation a try: http://jqueryvalidation.org/documentation/

It will relieve you of many validation headaches...

answered Aug 11, 2013 at 8:53

Angelin

6482 gold badges7 silver badges20 bronze badges

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

Comments

Harry · Accepted Answer · 2013-08-11 15:50:49Z

0

If my understanding of your question is correct. The following is your scenario:

First time you don't give value for any field, all errors are shown.
Second you give input for name field and expect name error do disappear, but still it is shown.

The reason is because you have 1 error division per input field (3 in total) and they are not hidden when the input is present. You could modify your code as below:

function validate() {
    var myName = document.getElementById("inputName");
    var myEmail = document.getElementById("inputEmail");
    var filter = /^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
    var myMessage = document.getElementById("inputMessage");
    var isValid = true;

    var myNameError = document.getElementById("inputNameError");
    var myEmailError = document.getElementById("inputEmailError");
    var myMessageError = document.getElementById("inputMessageError");

    //Initially hide all previous error messages.
    myNameError.className="hidden";
    myEmailError.className="hidden";
    myMessageError.className="hidden";

    if(myName.value == "") {
        myNameError.className="visible";//make error message div visible only on error.
        myNameError.innerHTML = "Please provide your name.";
        isValid = false;
    }

    if (!filter.test(myEmail.value)) {
        myEmailError.className="visible";//make error message div visible only on error.
        myEmailError.innerHTML="Please provide your email.";
        isValid = false;
    }       

    if(myMessage.value == "") {
        myMessageError.className="visible";//make error message div visible only on error.
        myMessageError.innerHTML = "Please provide your message.";
        isValid = false;
    }

    return isValid;
}

CSS

.hidden {display: none;}
.visible {display: block;}

EDIT Adding fiddle link based on comments.

edited Aug 11, 2013 at 15:50

answered Aug 11, 2013 at 8:59

Harry

90.1k26 gold badges216 silver badges224 bronze badges

5 Comments

Wafer Padduyao Over a year ago

oh, sorry i forgot. my bad :( yeah sure, i'll do that

Wafer Padduyao Over a year ago

umm.. follow up question.. whenever my inputs are successful, my inputs are still there.. how am i suppose to clear my inputs whenever my inputs are successful.. i tried to code and look for suggestions but still.. no luck :(

Wafer Padduyao Over a year ago

one solution i made is to add a captcha.

Harry Over a year ago

@WaferPadduyao Check the fiddle link I have added in the answer. I am not quite sure when you wanted to clear the values, so I have added them at all possible places :D Let me know in case you need more. And, yes Captcha is a very good addition to prevent spams.

Wafer Padduyao Over a year ago

thumbs up again ;).. i read on the internet that it is not good to put a captcha on the client side server instead it should be on the server side. still i think i should add a captcha. :)

Collectives™ on Stack Overflow

javascript client side validation loop

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related