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返回TRUE。试试这个：

<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"

否则它会将值传递给变量，并且不会正确验证表单。

表单验证不起作用

1 个答案: