CODEWITHSUNDEEP
javascripthtml
VaTo
VaTo

Reputation: 3078

Javascript validation form with no alert()

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?

Upvotes: 0

Views: 1120

Answers (2)

Said Kholov
Said Kholov

Reputation: 2486

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!

Upvotes: 3

Ally Rippley
Ally Rippley

Reputation: 525

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

Upvotes: 0

Related Questions