無法爲我的PHP表單觸發JavaScript驗證

我正試圖弄清楚我在獲取簡單表單驗證工作時遇到的一個難題。我知道我錯過了一些微不足道的東西，但沒有網絡開發經驗來發現它。從本質上講以下PHP源：無法爲我的PHP表單觸發JavaScript驗證

<?php 
if(!$_POST) 
{ 
?> 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript" src="example.js"></script>  
    </head> 
    <body> 
     <script> 
      $(document).ready(function(){ 
       $("#b1").click(function(){ 
        $("#div1").hide("slow"); 
        $("#div2").hide("slow"); 
       }); 
       $("#b2").click(function(){ 
        $("#div1").show("slow"); 
        $("#div2").show("slow"); 
       }); 
      });   
     </script>   

     <p>My Form!</p> 
     <form name="sampleform" action="myform_example.php" onsubmit="return DoNotAllowEmptyText();" method="post"> 
      <div id="div1"> 
       <p> 
        Text Field: 
        <input type="text" name="textfield" value="" /> 
       </p> 
       <p> 
        Number Field: 
        <input type="number" name="numfield" min="1" max="99" value="1" /> 
       </p> 
      </div> 
      <p> 
       Show/Hide Buttons: 
       <button id="b1" onclick="return false">Hide</button> 
       <button id="b2" onclick="return false">Show</button> 
      </p> 
      <div id="div2"> 
       <p> 
        Checkbox: 
        <input type="checkbox" name="cbfield" /> 
       </p> 
       <p> 
        Pulldown: 
        <select name="pulldown"> 
         <option value="0" selected="selected">Zero</option> 
         <option value="1">One</option> 
        </select>  
       </p>    
       <p> 
        <input type="submit" name="sampleform" value="Submit" /> 
       </p> 
      </div> 
     </form> 
    </body> 
</html> 

<?php 
} 
else if($_POST['sampleform'] == "Submit") 
{ 
echo "Text Field: ".$_POST['textfield']."<br>"; 
echo "Number Field: ".$_POST['numfield']."<br>"; 
echo "Checkbox Field: ".$_POST['cbfield']."<br>"; 
echo "Pulldown Field: ".$_POST['pulldown']."<br>"; 
} 
?>

這裏是相關聯的JavaScript文件（example.js）：

function DoNotAllowEmptyText() 
{ 
alert("Called!!"); 

var theField = document.forms["sampleform"]["textfield"].value; 

if(theField == null || theField == "") 
{ 
    alert("Please enter some text."); 
    return false; 
} 
}

如果我離開文本字段爲空我會預計

DoNotAllowEmptyText()

由於PHP文件中的下一行代碼而被調用，但這不是因爲警報沒有顯示來自函數調用

<form name="sampleform" action="myform_example.php" onsubmit="return DoNotAllowEmptyText();" method="post">

但是函數沒有被調用。是否與提交按鈕有關，導致頁面在JavaScript執行之前離開？我怎樣才能解決這個問題？

謝謝。

來源

2013-08-25 ButchDean

工作對我來說：http://jsfiddle.net/barmar/unJ8m/ – Barmar

是否有在JavaScript控制檯中的任何錯誤？ – Barmar

啊。你必須要jQuery的preventDefault。

改爲使用此功能。

$(document).ready(function() { 
    $('input:submit[name=sampleform]').click(function(e) { 
     var txt = $('input:text[name=textfield]').val(); 
     var num = $('input[type=number][name=numfield]').val(); 
     if(num == '' || txt == '') 
      { 
      alert('fill up the empty fields!'); 
      return e.preventDefault(); 
      } 

    }); 


});

這是使用preventDefault的函數的編輯版本。希望它有效。

function DoNotAllowEmptyText(e) 
{ 
    var theField = document.forms["sampleform"]["textfield"].value; 

    if(theField == null || theField == "") 
    { 
    alert("Please enter some text."); 
    return e.preventDefault(); 
    } 
}

來源

2013-08-25 17:49:25

preventDefault防止元素的自然行爲。 –

''onsubmit'處理程序'返回false'會阻止默認操作。沒有必要調用'e.preventDefault（）'。 – Barmar

謝謝Alex。將會回到最可能的明天，並讓你知道結果。非常感謝！ – ButchDean

無法爲我的PHP表單觸發JavaScript驗證

回答

相關問題