Javascript validation form with no alert()

Question

Im trying to build a HTML form which will validate if a user is entering all the values in each of the input boxes. So far I've found in google examples that when the user leaves the input box blank it would call alert() which is annoying for users if they have to fill up about 10 boxes and then by accident they hit submit now they have to close 10 alerts. I was thinking if is possible to just show a red message next to the empty box(es) indicating which boxes are empty. Here is my code showing alerts:

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" />
    <input type="text" id="subject" name="subject" />
    <input type="text" id="examnumber" name="examNumber" />
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

javascript:

function validateForm(){
    var result = true;
    var msg = "";

    if(document.ExamEntry.name.value==""){
        msg+="You must enter your Name \n";
        document.ExamEntry.name.focus();
        document.getElementById('name').style.color="red";
        result = false;
    }

    if(document.ExamEntry.subject.value==""){
        msg+="You must enter the Subject \n";
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color="red";
        result = false;
    }

    if(document.ExamEntry.examNumber.value=="")
    {
        msg+="You must enter the Examination Number \n";
        document.ExamEntry.examNumber.focus;
        document.getElementById('examnumber').style.color="red";
        result = false;
    }

    if(document.ExamEntry.examNumber.value.length!=4)
    {
        msg+="Your Examination Number must be 4 characters long \n";
        document.ExamEntry.examNumber.focus;
        document.getElementById('examnumber').style.color="red";
        result = false;
    }

    var lvlmsg="";
    for(var i=0; i < document.ExamEntry.level.length; i++)
        {
            if(document.ExamEntry.level[i].checked)
            {
                lvlmsg = document.ExamEntry.level[i].value;
                break;
            }
        }
    if(lvlmsg=="")
        {
            msg+="You Must Indicate Your Level";
            result=false;
            document.getElementById('radioButtons').style.color="red";
        }
    else
        {
            alert(lvlmsg);
        }

    if(msg==""){
        return result;
    }
    else{
        alert(msg);
        return result;
    }
}

Any ideas?

I would advice you create the *error* elements first, place them and style them as you like, and then add `display:none` to them. When you find an error, instead of showing an alert, just switch the display to `block`. — JCOC611, May 13 '15 at 23:11
I would suggest that you learn to be more consistent with your style. Actually its not even a styling choice, for future reference open brackets go on the same line as the statement. — Eric E, May 13 '15 at 23:17
Note that with [HTML5 form validation](http://diveintohtml5.info/forms.html#validation) you can simply say `` (the id="name" is unnecessary) and you can set a custom message as shown in [this SO answer](http://stackoverflow.com/a/5276722/17300). — Stephen P, May 13 '15 at 23:34

Said Kholov · Accepted Answer · 2015-05-13T23:26:27.227

3

Create a span element after each input:

<form name="ExamEntry" method="POST">
    <input type="text" id="name" name="name" /><span id="name-msg"></span>
    <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>
    <input type="text" id="examnumber" name="examNumber" /> <span id="examnumber-msg"></span>
    <input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

Then instead of doing this:

msg+="You Must Indicate Your Level";

Do:

var msg = document.createTextNode("You Must Indicate Your Level");
document.getElementById('name-msg').appendChild(msg);

And don't forget to remove alerts!

edited May 13 '15 at 23:26

answered May 13 '15 at 23:14

Said Kholov

2,436
1
15
22

Thanks it is working although I don't know why when I execute the code it just shows the red messages for 1 second and then they are gone. I would like them to stay until I click on submit again, here's my code: http://fixee.org/paste/8itu4fo/ – VaTo May 13 '15 at 23:57
You can check how appendChild works here http://www.w3schools.com/jsref/met_node_appendchild.asp Probably you are doing something wrong, sorry, I can't test your code right now – Said Kholov May 14 '15 at 00:02

score 0 · Answer 2 · answered May 13 '15 at 23:22

Make sure in your actual code that you are using onclick and not onlick ;)

When I am building form validations, I create a hidden inline span next to each element.

<form name="ExamEntry" method="POST">
<input type="text" id="name" name="name" /><span>Please use a valid name.</span>
<input type="text" id="subject" name="subject" /><span>Please use a valid subject.</span>
<input type="text" id="examnumber" name="examNumber" /><span>Please use a valid exam number.</span>
<input type="submit" name="submit" value="Submit" onlick="return validateForm()" />
</form>

Then in your css, do something like:

input + span {
  display:none;
  color: red;
}

In your js remove the alerts, and add something like this for each input:

document.getElementById("[id]").style.display = "inline";

Javascript validation form with no alert()

2 Answers2