Ajax表單驗證json

我的ajax contactform驗證有問題。錯誤檢查工作一點點。如果我輸入錯誤的電子郵件地址，它也驗證空名稱字段，我嘗試了不同的事情，但我認爲我錯過了一小部分。如果你回答我的問題，可否請你解釋一下這些變化，我真的很想學習！Ajax表單驗證json

這是我的代碼（或看到這個jsBin）：

Ajax調用

$('form.ajax').on("keyup", function(e){ 
     e.preventDefault(); 

     var $this = $(this); 
       data = {}; 

      $this.find('[name]').each(function(index, value){ 
       var $this = $(this), 
        name = $this.attr('name'); 
        value = $this.val(); 

       data[name] = value; 
      }); 


      $.ajax({ 
       url : "contact.php", 
       type: "post", 
       data: data, 
       dataType: "json", 

       success: function(response){ 

        error_check(response); 
       } 
      }); 


     });

功能我用它來檢查我的錯誤，並添加錯誤消息

 function error_check(arr){ 

     $.each(arr, function(key, value){ 

      var el = $('li.' + key); 

      if(value == true){ 

       if(el.hasClass('error')){ 
        $(el).removeClass('error') 
         .children('div.error').remove() 
         .addClass('validated') 
         .prepend('<div class="validated"></div>'); 
       }else{ 
        $(el) 
         .addClass('validated') 
         .prepend('<div class="validated"></div>'); 
       } 

      }else if(value == false){ 

       if(el.hasClass('validated')){ 
        $(el).removeClass('validated') 
         .children('div.validated').remove() 
         .addClass('error') 
         .prepend('<div class="error"></div>'); 
       }else{ 
        $(el) 
         .addClass('error') 
         .prepend('<div class="error"></div>'); 
       } 
      } 
     }); 
    }

這是我的php驗證碼：

if($_SERVER['REQUEST_METHOD'] == 'POST'){ 

$validated = array(); 

$name  = $_POST['name']; 
$company = $_POST['company']; 
$email  = $_POST['email']; 
$phone  = $_POST['phone']; 
$date  = $_POST['date']; 


/*Ajax validation*/ 

if(!empty($name) && strlen($name) >= 2){ 
    $validated['name'] = true; 
}else{ 
    $validated['name'] = false; 
} 


if(!empty($email)){ 
    $validate_email = filter_var($email, FILTER_VALIDATE_EMAIL);   

    if($validate_email){ 
     $validated['email'] = true; 
    }else{ 
     $validated['email'] = false; 
    } 
} 

echo json_encode($validated); 
}else{ 
die(); 
}

來源

2013-10-18 Frank Smith

爲什麼您在每次按鍵後驗證而不是在表單提交後驗證的具體原因是什麼？ – nietonfir

我已經爲此構建了超時函數，所以我認爲這不是問題。但是我決定在這個例子中擺脫這個功能。 –

這樣做的目的不會讓它變得更好。你爲什麼試圖模仿（以一種非常糟糕的方式）本地解決方案？使用'submit（）'。您能否使用您的javascript在[jsBin]（http://jsbin.com/）中提供相關的DOM（不要忘記模擬ajax調用）？ – nietonfir

您的帖子請求不包含date屬性（至少在您的jsBin示例中）並觸發錯誤。這是generelly更明智的檢查參數是否存在事先：

$name  = (isset($_POST['name']) ? $_POST['name'] : null; 
$company = (isset($_POST['company']) ? $_POST['company'] : null; 
$email  = (isset($_POST['email']) ? $_POST['email'] : null; 
$phone  = (isset($_POST['phone']) ? $_POST['phone'] : null; 
$date  = (isset($_POST['date']) ? $_POST['date'] : null; 

// check required parameters and exit if they're missing 
if (is_null($name) || is_null($email)) { 
    // some error handling here 
} else { 
    // and (almost) the rest of your existing script goes here 
} 

echo json_encode($validated);

[編輯]，關於你的「驗證上，每-按鍵」的方式：一個更好的辦法是充分利用HTML5輸入類型（例如<input type="email"…>），並在提交之前對客戶端進行一些簡單的驗證（您不會那麼做，所以它應該非常簡單）。您顯然仍然需要在後端進行驗證（但您只需將流量減少到幾乎爲零）！

來源

2013-10-20 20:30:10 nietonfir

我會嘗試這明天，謝謝你的幫助！ –

Ajax表單驗證json

回答

相關問題