驗證表單在提交之前（比檢查空字段更復雜）

Question

我有一個包含時間輸入（具體來說，開始和結束時間）的表單。當提交按鈕被按下時，它進入一個php頁面，這些輸入被添加到數據庫中。我想在允許表單提交之前檢查幾件事情。例如，我想確保開始時間早於（小於）結束時間。這裏的形式：

  Opens: 
      <select name="starthour1"> 
       <option value="00">12</option> 
       <option value="01">1</option> 
       <option value="02">2</option> 
       <option value="03">3</option> 
       <option value="04">4</option> 
       <option value="05">5</option> 
       <option value="06">6</option> 
       <option value="07">7</option> 
       <option value="08">8</option> 
       <option value="09">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
      </select> : 
      <select name="startminute1"> 
       <option value="00">00</option> 
       <option value="15">15</option> 
       <option value="30">30</option> 
       <option value="45">45</option> 
       <option value="59">59</option> 
      </select> 
      <select name="startwhen1"> 
       <option value="am">am</option> 
       <option value="pm">pm</option> 
      </select> 

      Closes: 
      <select name="endhour1"> 
       <option value="00">12</option> 
       <option value="01">1</option> 
       <option value="02">2</option> 
       <option value="03">3</option> 
       <option value="04">4</option> 
       <option value="05">5</option> 
       <option value="06">6</option> 
       <option value="07">7</option> 
       <option value="08">8</option> 
       <option value="09">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
      </select> : 
      <select name="endminute1"> 
       <option value="00">00</option> 
       <option value="15">15</option> 
       <option value="30">30</option> 
       <option value="45">45</option> 
       <option value="59">59</option> 
      </select> 
      <select name="endwhen1"> 
       <option value="am">am</option> 
       <option value="pm">pm</option> 
      </select> 

我發現javascript代碼如何檢查個別表單元素，但我無法弄清楚如何我可以結合多個沒有提交。在我的php頁面中，我有以下代碼：

$starthour1=$_POST['starthour1']; 
$startminute1=$_POST['startminute1']; 
$startwhen1=$_POST['startwhen1']; 
$endhour1=$_POST['endhour1']; 
$endminute1=$_POST['endminute1']; 
$endwhen1=$_POST['endwhen1']; 

$start_time1=$end_time1=""; 

    if($startwhen1=="pm"){ 
     $starthour1=$starthour1+12; 
    } 
    if($endwhen1=="pm"){ 
     $endhour1=$endhour1+12; 
    } 
    $start_time1=$starthour1.":".$startminute1.":00"; 
    $end_time1=$endhour1.":".$endminute1.":00"; 
    if($end_time1=="00:00:00"){ 
     $end_time1="23:59:00"; 
    } 

echo "<br>start time is ".$start_time1; 
echo "<br>end time is ".$end_time1; 

$startnum=str_replace(":", "", $start_time1); 
$endnum=str_replace(":", "", $end_time1); 
if($endnum<$startnum){ 
    echo "<br>start time can't be later than end time!"; 
} 
else{ 
    //add to database 
} 

但是，在提交後檢查這些東西沒有任何意義。我想如果發現錯誤，我可以重定向回到初始頁面，但這看起來效率不高。

另外，我在想也許我可以在頁面上使用檢查有效性的表單。如果驗證通過，它會發布到插入數據庫的php頁面。這是否有意義，這有可能嗎？

有沒有更好的解決方案？我想有什麼我可以用JavaScript做的事情，但我一直無法弄清楚。

此外，我想通知用戶輸入框旁邊出現的文字無效。一旦剩下的工作正常，我應該能夠弄清楚這一點。

謝謝。

Answer 1

擁有的onsubmit（）或窗體調用JavaScript函數的作用，就像這樣：

<form id="form" onSubmit="return doSubmit();" action="#"> 

然後，在doSubmit（）實際上你可以執行任何驗證的（只有實際上提交如果他們通過形式）

function doSubmit(){  
    if (validationsPass()) { 
     $('#form').submit(); 
    } 
} 

爲了通知無效的輸入的用戶旁邊的實際表單域，您可以隱藏層或跨越每個欄位旁，並使用Javascript來取消隱藏他們，如果他們失敗了一些有種驗證。

if(!fieldNotValid){ 
    $('#field-error').show(); //Or use effects like .highlight() 
} 

Answer 2

無論您是否在客戶端使用javascript進行檢查，始終在PHP級別檢查用戶輸入。

在javaScript中，我建議您使用jQuery庫，如jQuery，它具有用於表單驗證的plugin。非常有用且易於實現。

在PHP級別，我建議您使用filter_var函數。非常有效。

Answer 3

請考慮將表單數據轉換爲DateTime對象。這將比單獨調整每個部分更容易進行比較。它還將確保放入數據庫的DateTime字符串對於插入是安全的，因爲您將從format()方法獲得字符串。

Answer 4

感謝您的幫助！我最終使用：

<form action="add.php" onsubmit="return validate_form()" method="POST" name="addform"> 

有：

function validate_form(){ 
     var f = document.addform; 
     var start, end, starthour, endhour; 
     var valid=true; 
     .......... 

      starthour=f.starthour1.value; 
      endhour=f.endhour1.value; 
      if(f.startwhen1.value=="pm"){ 
       var starthournum = starthour * 1; 
       starthournum = starthournum+12; 
       starthour = starthournum.toString(); 
      } 
      if(f.endwhen1.value=="pm"){ 
       var endhournum = endhour * 1; 
       starthournum = starthournum+12; 
       starthour = starthournum.toString(); 
      } 
      start = starthour+f.startminute1.value; 
      end = endhour+f.endminute1.value; 

      if(end=="0000"){ 
       end="2359"; 
      } 

     if(end<start){ 
      alert("Start time can't be later than end time!"); 
      valid=false; 
     } 

     return valid; 
}