Form Validation without Alerts

Question

I was wondering if there's a way to validate the form without using alerts. Like usually you would see red text beside the input box if you typed in the wrong information or something. And I don't want to use Jquery. I've included a div for the red text messages in the html - namemsg, commentmsg, emailmsg.

So far I've only got the code with alerts. JavaScript:

function validateUser()
{
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<2 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
        alert("Not a valid e-mail address");
        return false;
    }

    {
        alert("Valid Input");
    }

    return true;
}

Html

 <form name="myForm" method="post">
    <label>*Name:</label>
    <input type="text" name="name" title="Enter a your name" placeholder="Your Name" onclick="select()" required/>
    <div id="namemsg"></div><br/>

    <label>*E-mail:</label>
    <input type="text" name="email" title="Enter a valid email address" placeholder="[e-mail]" onclick="select()" required/>
    <div id="emailmsg">  </div><br/>

    <label>*Comment:</label>
    <textarea name="comment" title="Enter your comments" placeholder="Enter your comments." onclick="select()" required/></textarea>
    <div id="commentmsg">  </div>
    <label id="error"> </label> <br/>
    <input type="submit" value="Submit" onclick="return validateUser()"> 
</form>

Answer 1

This should help.

if (atpos<2 || dotpos<atpos+2 || dotpos+2>=x.length){
// validate message function call
valMessage('emailmsg', 'Not a valid e-mail address');
return false;
}

// validate message function 
function valMessage(divName, content) {
     document.getElementById(divName).innerHTML = content;
}

Answer 2

First, I would recommend attaching the execute of the function to the event OnSubmit.

HTML:

<form method="post" name="myForm" onsubmit="return validateUser(this);">

JS:

function validateUser(formObj) {}

Next, the only thing you need to do, is just have some sort of container, and if the function detects an error, just append the error text to it.

At the start of each function call, empty the container.

If you want the error to appear next to the textbox/any input tag, just add a div/span next to each field and append the error to it.

document.getElementById("emailmsg").innerHTML = "Not cool...";

Answer 3

You can place a span/label next to validated field with predefined text and style and display style of none. If validation detects an invalid input - change the display style to "" to make the label visible.

Update

I do see you have already predefined DIV. Define it as

<div id="emailmsg" style="color:Red;display:none">Not a valid e-mail address</div>

And in JavaScript instead of

alert("Not a valid e-mail address");

Use

document.getElementById("emailmsg").style.display=""

Answer 4

Instead of showing alert message box you can color that textbox borders to red color and show the error beneath it. Like, if you replace the following line of code:

alert("Not a valid e-mail address");

With:

document.forms["myForm"]["email"].style.border = "1px solid red";
document.getElementById("emailmsg").innerHTML = "Not a valid e-mail address";

The above code will highlight the borders of email field with red color and show error in emailmsg div.

Hope this can help.

Answer 5

your html:

    <form name="myForm" method="post">
        <label>*Name:</label>
        <input type="text" name="name" title="Enter a your name" placeholder="Your Name" onclick="select()" required/>
        <div id="namemsg"></div><br/>

        <label>*E-mail:</label>
        <input type="text" name="email" title="Enter a valid email address" placeholder="[e-mail]" onclick="select()" required/>
// this span is hidden until you show it as error msg
    <span id="error" style='display: none'>Not a valid e-mail address<span>
        <div id="emailmsg">  </div><br/>

        <label>*Comment:</label>
        <textarea name="comment" title="Enter your comments" placeholder="Enter your comments." onclick="select()" required/></textarea>
        <div id="commentmsg">  </div>
        <label id="error"> </label> <br/>
        <input type="submit" value="Submit" onclick="return validateUser()"> 
    </form>

your js:

    function validateUser()
    {{
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<2 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
//instead of alerting error show your error span try to put nice css for it
    document.getElementById('error').style.display="block";
    return false;
    }

    {alert("Valid Input");}
    return true;
        }