Click here to Skip to main content
15,921,660 members
Please Sign up or sign in to vote.
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

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[^]
 
Share this answer
 
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
use html 5

1)for email

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

2)for validating textbox

Username: <input type="text" name="usrname" required>
 
Share this answer
 
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
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>
 
Share this answer
 
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';
}
 
Share this answer
 
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...
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900