提交ajax表單之前如何驗證？

Question

我正在對服務器上的php頁面進行ajax跨域請求。 我通過ajax從html發布表單到服務器上的php頁面。 在客戶端進行驗證時遇到問題。

我不知道在發送表單之前如何在客戶端進行驗證。

html表單是標准表單，張貼輸入字段：名稱，姓氏，消息...。我的html表單，客戶端：

<script type="text/javascript">

    var output = $('.nesa');

     $(document).ready(function(){
     $("#form1").submit(function (e) {
     e.preventDefault();

    $.ajax({
        url: 'http://www.example.com/form.php',
        crossDomain: true, //set as a cross domain requests
        type: 'post',
        data: $("#form1").serialize(),
        beforeSend: function (){
        // add spinner
         $('.spinner').append('<img id="animacija" src="spinnersmall.gif" alt="Loading" />');
                   },

        success: function (data) {
            $(".nesa").html(data);
            alert("sent " + data);

        },

        error: function(){

            output.text('Message is not sent!');

        }

    });
});

});

如何驗證？ 我嘗試將代碼放入beforeSend中，但沒有成功。 或者也許使用submitHandler？

想法是用戶單擊提交時，驗證開始，如果沒有告訴“插入您的電子郵件地址”。 現在，當我單擊提交時，它將數據發送到服務器。 我要先檢查輸入字段。

這種形式在將數據發送到服務器時是可行的，但只需要弄清楚如何進行驗證即可。 在ajax調用中將驗證放在哪里？

謝謝

Answer 1

創建一個函數來驗證返回true / false的表單。 在$ .ajax之前調用該函數。 檢查return是否為false，然后返回..參見下面的示例...

if(!validateForm())
    return false;

Answer 2

發送ajax請求之前，請驗證表單。 如果沒有錯誤，則應該發送ajax請求，否則返回false。 您可以像這樣：

 $("#form1").submit(function (e) {
     e.preventDefault();

    // Get the Login Name value and trim it
    var name = $.trim($('#name').val());

    // Check if empty of not
    if (name === '') {
        alert('Text-field is empty.');
        return false;
    }
});

您可以在此處查看演示（ http://jsfiddle.net/LHZXw/1/ ）

您還可以使onKeyup函數。

Answer 3

首先，您實際上是在使用AJAX表單嗎？

您解釋說您是通過AJAX加載表單本身的，但是您也以這種方式發送嗎？ 在我看來，您正在嘗試以HTML方式發送它。 您可以在發送表單之前加入發送按鈕的click事件 。 但是，由於按鈕是在運行時添加到頁面的，因此您需要將事件注冊到document 。

$(document).on('click', 'input[type=submit]', function() {
    // Validate form
    // Add error message on fail, and return
    // Else submit form via AJAX
});

無論哪種情況，當用戶跳轉到下一個字段時，都可以使用jQuery的blur事件作為驗證每個字段的替代方法。 您甚至可以在用戶每次使用keypress 。

Answer 4

在將它們輸入AJAX調用之前，我總是會立即對其進行驗證。 這是我的求婚

$('#form_nieuwsbrief').bind('submit',function(){
    var name = $('input[name=naamNieuwsbrief]').val();
    var email = $('input[name=emailNieuwsbrief]').val();

    var proceed = true;
    if (name==""){
        $('input[name=naamNieuwsbrief]').css({'border':'2px solid red'});
        proceed = false;
        }
    if (email==""){
        $('input[name=emailNieuwsbrief]').css({'border':'2px solid red'});
        proceed = false;
        }
    if(proceed == false){
        $("#msg").append("<div class='alert alert-danger' role='alert'>U bent informatie vergeten in te vullen.</div>");    
        setTimeout(function(){
            $('.alert').fadeOut(400, function(){
                $(this).remove();
                })
            ;},10000
        );
    }

    if(proceed == true){ // make the ajax call

對於僅要求名稱和電子郵件的新聞通訊，這只是一種快速的方式。 但是原理是一樣的。 在進行ajax調用之前，請使用您設置的變量（如果出現錯誤）創建if else語句。 否則您將其保留在原始驗證上，因此可以繼續進行。

Answer 5

您已經通過服務器端驗證了嗎？ 您為什么不通過Ajax使用相同的驗證規則來使外觀像客戶端一樣。 我有一個有關如何執行此操作的教程：

http://michaelsoriano.com/how-to-ajax-validate-forms/