2013-07-30 84 views
0

由於在表單中使用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> 
+1

我推薦使用'placeholder'屬性,而不是設置輸入的默認值 –

+1

可以單獨使用JavaScript來完成它,但它是非常困難的(對於你來說寫和任何人閱讀...)。 ** jQuery **當然可以在這裏非常有幫助。 – cars10m

+0

剛剛發現可能的原因,它不起作用:雖然你明確地返回錯誤的值爲每個案件,你發現一個非法的項目,你不提供一個成功的正值。 – cars10m

回答

0

我有嘗試使用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" 

否則會傳遞值一起到變量,將不能正確驗證表單。

+0

placeholder =「姓名」的作品,非常感謝您的幫助。 –