How to validate Empty Text box & E-mail format in HTML using Java Script

Question

0.00/5 (No votes)

See more:

In HTML form I need to validate text boxes which is not to be empty and one e-mail field which is to be in e-mail format.

If user enters wrong e-mail or empty text box, it should throw a alert msg.

Posted 11-Jun-13 1:27am

KuttiSankar

Add a Solution

5 solutions

Solution 1

Try this way:
HTML:

HTML

<form name="form1" method="" action="" onsubmit="return validateForm(this)">
    <input type="text" name="name" value="Name"/><br />
    <input type="text" name="addressLine01" value="Address Line 1"/><br />
    <input type="submit"/>
    </form>

JavaScript:

JavaScript

function validateForm(form) {

        var nameField = form.name;
        var addressLine01 = form.addressLine01;

        if (isNotEmpty(nameField)) {
            if(isNotEmpty(addressLine01)) {
                return true;
            {
        {
        return false;
    }

    function isNotEmpty(field) {

        var fieldData = field.value;

        if (fieldData.length == 0 || fieldData == "" || fieldData == fieldData) {

            field.className = "FieldError"; //Classs to highlight error
            alert("Please correct the errors in order to continue.");
            return false;
        } else {

            field.className = "FieldOk"; //Resets field back to default
            return true; //Submits form
        }
    }

Refer:
http://www.htmlgoodies.com/beyond/article.php/3849281/Checking-Your-Work-Validating-Input----Getting-Started.htm[^]
http://mrbool.com/validation-in-javascript-emails-letters-and-empty-input-textbox/25472[^]

..and also refer google[^]

Posted 11-Jun-13 1:33am

Prasad_Kulkarni

Comments

KuttiSankar 11-Jun-13 7:57am

I didnt find any tag as form. Can u help me to solve? where i have to give onsubmit="return validateForm(this)" in html

Solution 2

use html 5

1)for email

E-mail: <input type="email" name="email">

2)for validating textbox

Username: <input type="text" name="usrname" required>

Posted 11-Jun-13 1:33am

amit29391

Updated 11-Jun-13 1:34am

v3

Comments

KuttiSankar 11-Jun-13 8:13am

required keyword is not exist in html input tag

amit29391 11-Jun-13 8:23am

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required

which ide are you using

KuttiSankar 11-Jun-13 8:30am

No it is not working. I had found and pls refer my solution. Thanks amit

Solution 5

If Html Tags are...

ASP.NET

<div class="lbl_txt">
<asp:label id="lbl_email" runat="server" cssclass="lbl_name" xmlns:asp="#unknown">E-Mail<span style="color:#EC7517; font-size: 15px;">*</span></asp:label>
<asp:textbox id="txtEmail" runat="server" cssclass="text_mail" xmlns:asp="#unknown"></asp:textbox><span id="mesg_mail" class="msg_mail"></span>
</div>

JavaScript Would Be like this...

JavaScript

var mail=document.getElementById('txtEmail').value;
var mail_pattern=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

if(mail=='')
{
document.getElementById('txtEmail').style.background='#F7D3B3';
document.getElementById('mesgMail').innerHTML='Enter Your E-Mail ID';
document.getElementById('mesg_mail').style.color='#636363'; 
return false;
}

else if(mail_pattern.test(mail)==false)
{
document.getElementById('mesg_mail').innerHTML='Enter a Valid E-Mail Id';
document.getElementById('txtEmail').style.background='#F7D3B3';
document.getElementById('mesg_mail').style.color='#636363';
return false;
}
else
{
document.getElementById('mesg_mail').innerHTML='';
document.getElementById('txtEmail').style.background='#FFF';
}

Posted 11-Jun-13 3:18am

Balasubramanian T

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

KuttiSankar · Accepted Answer · 2013-06-11T02:35:00

For Button(HTML)

<input id="Submit1" type="submit" value="Submit Application" onclick="validateMyForm()"/>

Script for Function:

C#

function validateMyForm()

    {

        var valid = true;

        var validationMessage = 'Please correct the following errors:\r\n';





        if (document.getElementById('Text1').value.length == 0)

        {

            validationMessage = validationMessage + '  - Name is missing\r\n';

            valid = false;

        }





        if (document.getElementById('Text4').value.length == 0)

        {

            validationMessage = validationMessage + '  - Educational Qualification is missing\r\n';

            valid = false;

        }





        if (document.getElementById('Text12').value.length != 10)

        {

            validationMessage = validationMessage + '  - Cellphone Number is not correct\r\n';

            valid = false;

        }




        if (document.getElementById('Text10').value.length == 0)

        {

            validationMessage = validationMessage + '  - Email is missing\r\n';

            valid = false;

        }





        if (valid == false)

        {

            alert(validationMessage);

        }



        return valid;

    }



</script>

KuttiSankar · Accepted Answer · 2013-06-11T03:28:00

Here is my Solution...

C#

if (document.getElementById('Text10').value == "")

        {
            alert("Enter Your E-Mail");



            document.getElementById('Text10').focus();
            return false;

        }
        var emailvalid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if(document.getElementById('Text10').value.match(emailvalid))
        {
            alert("Email Validation: Successful.");
            return true;
        }
        else
        {
            alert("Enter Proper Mail id");
            document.getElementById('Text10').focus();
            return false;
        }

Thanks Friends...