jquery ajax表單驗證

我有一個表單，我首先進行驗證，然後通過ajax提交，其中一些字段被選中，例如用戶名，可能已經存在於數據庫中。我想在問題元素之後立即顯示這些錯誤條件之一。表單元素是這樣的：jquery ajax表單驗證

<span class="inputRow"> 
    <span class="formLabel"> 
     <label for="user_name">User Name</label> 
    </span> 
    <span class="formInput"> 
     <input id="user_name" name="user_name" class="inputText required" title="User Name" tabindex="3" type="text" value="<?= $user_name ?>" > 
     <span class="formError"><span id="user_msg"></span></span> 
    </span> 
    </span>

我有一個典型的驗證/ errorPlacement這樣的代碼：

errorPlacement: function(error, element) 
    { 
    if (element.attr("name") == "user_name") 
     error.insertBefore("#user_msg"); 
    else 
     error.insertAfter(element); 
    }, 
});

提交表單，我有一個提交處理程序，看起來像這樣：

submitHandler: function(form) { 

    $.ajax({ 
    type:'POST', 
    url: 'add_user.php', 
    data:$('#reg_form').serialize(), 
    success: function(response) { 
     if (response.status == "error") { 
     if (!response.hasOwnProperty('user_name')) 
      $("#user_msg").text(""); 
     else if (response.user_name.length > 0) 
      $("#user_msg").text(response.user_name); 
     } 
    } 
    }); 
},

返回的響應是一個JSON數組，我可以很容易地得到錯誤信息。這一切在我第一次提交表單時都很有用。如果我有一個重複的用戶名，顯示正確，或者沒有輸入用戶名，那麼它也會正確顯示。當我提交表單並獲得關於文件中重複用戶名的響應時，問題就出現了。然後，如果我清除了user_name字段並嘗試再次提交表單，則重複的用戶名消息將保留在此處，並且還會顯示說明需要用戶名的消息。

對我來說，這似乎是如何顯示的衝突，因爲errorPlacement函數使用error.insertBefore（「＃user_msg」），但從ajax函數的返回使用$（「＃user_msg」）.text （）。所以insertBefore（）不會刪除以前的文本（）值，但我還沒有找到任何其他方式顯示來自errorPlacement的文本。我們能否從錯誤對象中獲取文本值？如果是這樣，怎麼樣？還是有更好的方法使這兩種工作更加相同？

來源

2013-02-14 abbaroo

秀其餘的代碼。你如何/在哪裏調用'.validate（）'例如？ – Sparky 2013-02-14 04:00:39

你應該使用validate插件的'remote'功能。這可以讓您將AJAX調用與用戶名相關聯，而不是提交整個表單。 – Ryley 2013-02-14 16:16:57

驗證過程如下所示： – abbaroo 2013-02-15 23:25:30

我沒有完全明白你的問題。

如果您在顯示錯誤時遇到問題，當發生錯誤並且您修復錯誤時，錯誤仍會保留，這是因爲您沒有清空錯誤位置。解決方案在您發送新請求之前將您的錯誤放置置於空白處。

你可以使用jQuery的對話框在替代方法中顯示錯誤。

來源

2013-02-14 03:26:33 Hamid

看了一下之後，我明白了爲什麼會發生這種情況。當我在該字段中輸入字符時，它會轉到驗證例程，但檢查重複用戶的錯誤文本仍然存在。所以我需要在該字段中按下某個鍵時將其清除。 – abbaroo 2013-02-15 23:52:42

Quote：「我們能從錯誤對象中獲得文本值嗎？如果是這樣，怎麼辦？

您可以通過以下獲得從error對象的文本：

error.text()

取決於你如何使用它，你可能需要像這樣格式化：

$(error).text()

來源

2013-02-14 04:03:56 Sparky

我改變它使用error.text（），它幫助解決了這個問題，但是現在它導致了另一個問題。現在長度驗證繼續說，即使增加超過5個字符的最小值，字段的長度也太短。哦，這真是太有趣了...... – abbaroo 2013-02-15 23:37:37

@abbaroo，請回復我對你的OP的評論，以便我可以嘗試幫助你更好。通過編輯您的OP來完成。謝謝。 – Sparky 2013-02-15 23:42:21

jquery ajax表單驗證

回答

相關問題