表单正在验证，但即使出现错误消息也仍然可以通过

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

因此有两个问题：

1. return; 不等于return false; 或return true; ，您需要明确说明您的返回值，因为这将决定您的表单是否提交（ true ）（ false ）。

2. 从提交按钮中删除onclick，并将其作为onsubmit事件移至表单标签onsubmit="return validateForm()"

Answer 2

提交验证的onclick不会停止。在表单中使用onsubmit

<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;
} 

}