2014-11-20 145 views
0

我試圖做一個按鈕的簡單驗證,但是當我點擊按鈕而沒有輸入任何內容時,它仍然會去testValidation1.html而不是彈出警報窗口。JavaScript和HTML表單驗證

<html> 

<head> 
</head> 

<body> 

     <form action="testValidation1.html"> 

     Parameter1 : 
      <input type = 'text' name = 'param1'/><br> 

      <input type='submit' value = 'submit' onclick = 'return validateForm()'> 
     </form> 

     <script type="text/javascript"> 

     function validateForm() { 
      var f1 = document.forms[0]; 
      var p1 = f1.param1; 

      if(p1.value.length == 0) { 

       alert('Plz enter parameters'); 
       p1.focus(); 
       return false; 
      } 
    } 

     </script> 


</body> 
</html> 
+2

我可能是愚蠢的,但它或許應該是'的onclick =「validateForm() ''而不是'onclick ='返回validateForm()''? – philtune 2014-11-20 21:09:53

+1

請嘗試'onsubmit'(在'

'標籤內)。 – lesssugar 2014-11-20 21:11:21

+1

我測試它在我的本地..它工作正常..它總是顯示彈出.. – IbrahimAsad 2014-11-20 21:12:48

回答

2

,你可能會發現它更容易使用表單的提交事件驗證

function validateForm(event) { 
    var form = this; 
    var p1 = form.elements['param1']; 
    if(p1.value.length === 0) { 
     alert('Plz enter parameters'); 
     p1.focus(); 
     event.preventDefault(); 
     return false; 
    } 
} 

document.getElementById('form').addEventListener('submit', validateForm); 

http://jsfiddle.net/7j0usuam/