2015-12-02 113 views
1

我試圖驗證窗體中的字段使用PHP,但我需要類似於e.preventDefault()來停止頁面刷新/加載,如果有錯誤驗證。我對JavaScript/jQuery不是很熟悉,所以我寧願用PHP處理所有POST數據(如果可能的話)。我試圖在提交時運行checkForm()函數,但是我意識到它始終返回true,因爲它在數據發佈之前運行。我也想過創建一個JS函數來調用e.preventDefault(),但我認爲我唯一的選擇是(#form).submit()函數,我想避免必須在JS/jQuery中檢索和發佈數據,因爲一些元素是DOM元素,我不確定如何在JS/jQuery中訪問它們。PHP在提交後阻止頁面刷新/加載

爲了讓你我一起工作的DOM元素的想法,下面是動態創建行的的jsfiddle:

https://jsfiddle.net/hnj6ed1y/52/

可能有多個行和領域具有相似的名稱(例如: textfield1,textfield2等)。

任何想法?提前感謝您的幫助!

<?php 

    // setting initial variables here 

    ?> 

    <script> 

    var isDateTimeValid = true; 

    function checkDates(val) { 

     if (val == false) { 
      isDateTimeValid = false; 
     } 
     else { 
      isDateTimeValid = true; 
     } 
    } 


    function checkForm() { 

     if (isDateTimeValid == true) { 
      return true; 
     } 
     else { 
      alert("Please check date/times"); 
      return false; 
     } 
    } 
    </script> 

    <?php 

    if(isset($_POST['next'])){ 

     // Validating POST data here 

     $dateValid = convertOORDateTime($date1, $time1, $date2, $time2); 

     if ($dateValid < 1) { 
      echo "<script> checkDates(false); </script>"; 
      $errors[] = 'Please make sure your dates are correct'; 
     } 
     else { 
      echo "<script> checkDates(true); </script>"; 
     } 

    } 

    $err_msg = ''; 

    if(!empty($errors)){ 

     // want to stop page refresh/load here 

     $err_msg = '<p class="error">'.implode('<br />', $errors).'</p>'; 
    } 

    ?> 

    <!DOCTYPE html> 
    <form name="form1" id="form1" method="post" action="<?php print $thispage;?>" onsubmit="return checkForm()"> 

     <?php echo $err_msg; ?> 

    </form> 
+0

要麼你感到困惑或我,你可以做。 – bassxzero

+0

@bassxzero我很困惑。我只是試圖驗證PHP中的POST數據(正在工作),但是當我遇到無效數據時,我需要防止重新加載頁面。我知道HTML中的「回聲」需要重新加載頁面,但我可以解決這個問題。 –

+0

因此,您希望服務器檢查您的頁面而不刷新頁面?那可能嗎? –

回答

0

你應該保持你的驗證檢查客戶端/服務器是分開的。提交之前使用JS和PHP之後。不要糾結這兩者。當你通過php調用JS時,服務器必須發送一個響應給瀏覽器(客戶端)以發生任何事情,從而重新加載頁面。

示例:echo "<script> checkDates(false); </script>"; Echo()將輸出發送到瀏覽器(客戶端)。在這種情況下需要JS來運行一個函數。

用於。(模糊)在提交之前進行實時簡單驗證。一旦提交,然後你使用PHP服務器端驗證。永遠不要依靠客戶。 JS可以通過瀏覽器關閉,編輯等。

<form> 
    <input tabindex="1" id="field1" type="text" name="field1" value="value 1" required /> 
    <input tabindex="2" id="field2" type="text" name="field2" value="value 2" required /> 
    <input tabindex="3" type="text" name="field3" value="value 3" /> 
    <input tabindex="4" type="submit" name="submit" value="Submit" /> 
</form> 

<script> 
/* Simplistic validation */ 
jQuery(document).ready(function($){ 
    jQuery(document).on("blur", "#field1", function(){ 
    // validate this field 

    }); 

    jQuery(document).on("blur", "#field2", function(){ 
    // validate this field 

    }); 

}); 
</script> 
+0

我正在使用模糊,但有些字段需要與其他字段(即:兩個日期字段)進行比較,所以我不認爲模糊會在這種情況下工作? –

+0

模糊不會幫助他處理提交表單數據 – bassxzero

+0

感謝您的澄清,@布萊恩。我想避免頁面重新加載,因爲如果我使用PHP進行驗證,它將清除表單,但我想我只需要將它們的數據存儲在會話中以在頁面重新加載後重新調用它。 –

2

當你的checkForm無法阻止表單提交時,這很奇怪。你的JS代碼可能會拋出錯誤,然後代碼繼續運行。

簡單的方法是將提交按鈕更改爲普通按鈕。當您點擊正常按鈕時,表單不會自動提交。一旦驗證無誤,您可以通過jquery手動提交表單。

$('#button-id').click(function(){ 
    var valid = true; 
    // perform the validation here, for example 
    if($('something').val() == "") { 
     valid = false; 
     // notice user the error 
    } 
    // Continue to validate 

    // Finally, check the valid 
    if(valid) { 
     ('#form-id').submit(); 
    } 
}); 

在驗證部分,你很可能使用jQuery驗證,然後根據其次

var form = $("#myform"); 
form.validate(); 
$("button").click(function() { 
    if(form.valid()) { 
     form.submit(); 
    } 
}); 
+0

我必須將驗證移動到JS/jQuery .submit();函數而不是在PHP代碼中? –

+0

請看看我編輯過的版本。 –

+0

在你的第一個例子中,我是否需要對字段名進行硬編碼以驗證它(例如:if($('field1').val()==「」)')?我要問的原因是因爲我需要比較日期字段(即:'if($('date1').val()> $('date2').val())',但用戶可以添加儘可能多的日期字段,因此如何知道是否添加了date3和date4以便比較它們? –