CODEWITHSUNDEEP
javascriptjqueryformsvalidation
NBZeno
NBZeno

Reputation: 11

Form is validating but still sends through even after error message

I am building a web form with validation and when the form is submitted with none of the fields filled in It pops up with the error message but then still goes through. Maybe someone else can see my mistake. Below I added the scripts for both the form and validators.

Thank you in advance!

function validateForm()
{
    var x=document.forms["contactform"]["fname"].value;
    if (x==null || x=="" || x=="First Name*" )
    {
        alert("Please Provide your First Name");
        return false;
    }

    var y=document.forms["contactform"]["lname"].value;
    if (y==null || y=="" || y=="Last Name*" )
    {
        alert("Please Provide your Last Name");
        return false;
    }

    var em = document.forms["contactform"]["email"].value;
    if (em == null || em == "" || em == "Email*") 
    {
        alert("Please Provide your Email");
        return;
    }

    var atpos=em.indexOf("@");
    var dotpos=em.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=em.length)
    {
        alert("E-mail address is not valid");
        return false;
    }

    var ph = document.forms["contactform"]["phone"].value;
    if (ph ==null || ph=="" || ph=="Phone*" )
    {
        alert("Please Provide your Phone Number");
        return;
    }



        document.contactform.submit();   

}

<form class="cmxform" id="contactform" method="post" action="contact-life-factor2.asp" >
                <input name="fname" type="text"class="required" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="First Name*" />
                <input name="lname" type="text"class="required" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="Last Name*" />
                <input name="company" type="text"class="" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="Company" />
                <input name="email" type="text" class="required" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="Email*"/>
                <input name="phone" type="text" class="" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="Phone*"/><br>
                <div class="clearfix"></div>
                <div style="padding-left:6px; padding-top:5px; font-weight:bold; color:#686868;">Comments:</div>
                <textarea name="comments" cols="" rows="" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="comments" ></textarea>

                <input type="submit" value="Submit" name="submit" class="submit" onClick="javascript:validateForm();"  style="margin-right:44px;"/>
                </form>

Upvotes: 0

Views: 223

Answers (2)

Bhadra
Bhadra

Reputation: 2104

onclick of submit validation doesnt stop.use onsubmit in form

<form class="cmxform" id="contactform" method="post" onsubmit="return validateForm();" action="contact-life-factor2.asp" >


function validateForm()
{ 
var x=document.forms["contactform"]["fname"].value;
if (x==null || x=="" || x=="First Name*" )
{
    alert("Please Provide your First Name");
    return false;
}

var y=document.forms["contactform"]["lname"].value;
if (y==null || y=="" || y=="Last Name*" )
{
    alert("Please Provide your Last Name");
    return false;
}

var em = document.forms["contactform"]["email"].value;
if (em == null || em == "" || em == "Email*") 
{
    alert("Please Provide your Email");
    return false;
}

var atpos=em.indexOf("@");
var dotpos=em.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=em.length)
{
    alert("E-mail address is not valid");
    return false;
}

var ph = document.forms["contactform"]["phone"].value;
if (ph ==null || ph=="" || ph=="Phone*" )
{
    alert("Please Provide your Phone Number");
    return;
} 

}

Upvotes: 1

Rob M.
Rob M.

Reputation: 36511

So there are a couple of issues:

  1. return; is not equivalent to return false; or return true;, you need to be explicit with your return value as this will dictate whether or not your form submits (true) or not (false).

  2. Remove the onclick from your submit button and move it to your form tag as an onsubmit event onsubmit="return validateForm()"

Upvotes: 2

Related Questions