表单验证不起作用

Question

由于在表单中使用value="“属性，表单验证无法工作。有谁能建议我用value="“属性来验证当前验证代码的表单吗？

HTML代码-

<form action="email.php" method="post" name="contactForm" id="contactForm" onsubmit="return validateForm();">
    <input type="text" onfocus="if(this.value == 'Name'){this.value = '';}" onblur="if(this.value == ''){this.value='Name';}" id="Name" value="Name" name="name">
    <input type="text" onfocus="if(this.value == 'Company'){this.value = '';}" onblur="if(this.value == ''){this.value='Company';}" id="Company" value="Company" name="company">
    <input type="text" onfocus="if(this.value == 'Email'){this.value = '';}" onblur="if(this.value == ''){this.value='Email';}" id="Email" value="Email" name="email">
    <input type="text" onfocus="if(this.value == 'Phone'){this.value = '';}" onblur="if(this.value == ''){this.value='Phone';}" id="Phone" value="Phone" name="phone">                        

    <span>
        <input type="text" onfocus="if(this.value == 'Geo Targeting'){this.value = '';}" onblur="if(this.value == ''){this.value='Geo Targeting';}" id="GeoTargeting" value="Geo Targeting" name="geo_targeting">
        <input type="text" onfocus="if(this.value == 'Web Site'){this.value = '';}" onblur="if(this.value == ''){this.value='Web Site';}" id="WebSite" value="Web Site" name="website">        
        <textarea onfocus="if(this.value == 'Message'){this.value = '';}" onblur="if(this.value == ''){this.value='Message';}" id="Message" name="message">Message</textarea>
        <input class="sendBtn" name="submit" type="submit" value="Send" />
    </span>
</form>

Javascript代码-

<script language="javascript" type="text/javascript">
    function validateForm() {
        var x=document.forms["contactForm"]["name"].value;
        if (x==null || x=="") {
            alert("Name must be filled out");
            return false;
        }

        var x=document.forms["contactForm"]["company"].value;
        if (x==null || x=="") {
            alert("Company Name must be filled out");
            return false;
        }

        var x=document.forms["contactForm"]["email"].value;
        var atpos=x.indexOf("@");
        var dotpos=x.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
            alert("Email must be filled out/Not a valid e-mail address");
            return false;
        }

        var x=document.forms["contactForm"]["message"].value;
        if (x==null || x=="") {
            alert("Message must be filled out");
            return false;
        } 
    }
</script>

Answer 1

我在尝试使用AJAX查询进行相同页面验证时遇到了类似的问题。最后，我发现问题是，没有任何东西返回真实的onSubmit。试试这个：

<script language="javascript" type="text/javascript">
            function validateForm()
            {
            var x=document.forms["contactForm"]["name"].value;
            if (x==null || x=="")
              {
              alert("Name must be filled out");
              return false;
              }

            var x=document.forms["contactForm"]["company"].value;
            if (x==null || x=="")
              {
              alert("Company Name must be filled out");
              return false;
              }

            var x=document.forms["contactForm"]["email"].value;
            var atpos=x.indexOf("@");
            var dotpos=x.lastIndexOf(".");
            if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
              {
              alert("Email must be filled out/Not a valid e-mail address");
              return false;
              }

            var x=document.forms["contactForm"]["message"].value;
            if (x==null || x=="")
              {
              alert("Message must be filled out");
              return false;
              } 
else {
document.getElementById("contactForm").submit();
            }
}
</script>

当我遇到麻烦时，这为我解决了这个问题。

还有，一个方便的小把戏，而不是说

value="Name"

你可以试试

placeholder="Name"

否则，它将把值传递给变量，而不能正确地验证表单。