Question

我正在构建一个带有验证的Web表单，当提交表单时没有填写任何字段它会弹出错误消息，但仍然会通过。也许其他人可以看到我的错误。下面我添加了表单和验证器的脚本。

提前谢谢！

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>

Answer 1

所以有几个问题：

return;不等同于return false;或return true;，您需要明确返回值，因为这将决定您的表单是否提交（{{1} }}）或不（true）。
从提交按钮中删除onclick，并将其作为false事件移至您的表单标记 onsubmit

Answer 2

提交验证的onclick不会停止。使用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;
} 

}

表单正在验证但仍然在错误消息后仍然发送

2 个答案: