0

非常に単純な検証スニペットと単純な AJAX 呼び出しを含むフォームがありますが、2 つを一緒にしようとすると問題が発生します。AJAX 呼び出しの前に検証スニペットを配置すると、検証は機能しますが、AJAX 呼び出しは送信されません。AJAX 呼び出しを検証の前に置くと、AJAX 呼び出しは機能しますが、検証は機能しません。私は本当に迷っていて、これについて何時間も頭をぶつけていました。どんな助けでも大歓迎です！

$("#headerForm").submit(function(){

    var validate = true;      
    $("#headerForm :input").each(function(){                   
        var $this = $(this);                           
        if(this.id == "phoneNumber" && $this.val().length < 10 ){     
            alert("Please enter a valid phone number");
            validate = false;
            return false;        
        } else if(!this.value.length){           
            alert("field is required");
            validate = false;
            return false;  
        }           
    });
    return validate;

var name = $("#name").val();
    var phone = $("#phone").val();

    var dataString = 'name='+ name + '&phone=' + phone; 

    $.ajax({  
      type: "POST",  
      url: "/bin/headerForm",  
      data: dataString,  
      success: function() {  
        $('#headerForm').html("<div id='message'>Thank you</div>");  
      }  
    });  
    return false; 
 });
4

1 に答える 1

2

ベスト プラクティスは、検証コードを関数に移動してから、送信ハンドラーで呼び出すことです。

function validateForm() {
    var validate = true;
    $("#headerForm :input").each(function () {
        var $this = $(this);
        if (this.id == "phoneNumber" && $this.val().length < 10) {
            alert("Please enter a valid phone number");
            validate = false;
            return false;
        } else if (!this.value.length) {
            alert("field is required");
            validate = false;
            return false;
        }
    });
    return validate;
}

次に、送信ハンドラー:

$("#headerForm").submit(function () {

    if (validateForm()) {
        var name = $("#name").val();
        var phone = $("#phone").val();

        var dataString = 'name=' + name + '&phone=' + phone;

        $.ajax({
            type: "POST",
            url: "/bin/headerForm",
            data: dataString,
            success: function () {
                $('#headerForm').html("<div id='message'>Thank you</div>");
            }
        });
    }
    return false;
});
于 2013-05-13T21:04:42.707 に答える