jquery - jQuery関数が実行を停止しない

Question

訪問者情報を mysql db に追加する前に、フォームを検証しようとしています。jQuery スクリプトは次のとおりです。

var phone = $("input#phone").val();
    if (phone == "") {
  $("label#phone_error").show();
  $("input#phone").focus();
  return false;
}

//Captcha validation
var security_code = $("input#security_code").val();
$.ajaxSetup({cache: false})
$.get('getsession.php', {requested: 'seccode'}, function (data) {
var session = data;

if (security_code !== session) {
    $("label#security_code_error").show();
    $("input#security_code").focus();
    alert ('NO MATCH: '+security_code+' '+session);
    return false; // <= FUNCTION SHOULD EXIT HERE
} else {
    alert ('MATCH!!!: '+security_code+' '+session);
}
});     

    var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
    //alert (dataString);return false;

    $.ajax({
  type: "POST",
  url: "bin/process.php",
  data: dataString,
  success: function() {
    $('#contact_form').html("<div id='message'></div>");
    $('#message').html("<h2>Contact Form Submitted!</h2>")
    .append("<p>We will be in touch soon.</p>")
    .hide()
    .fadeIn(1500, function() {
      $('#message').append("<img id='checkmark' src='images/check.png' />");
    });
  }
 });
return false;
});
});

名前が欠落している場合、フォームにエラーが表示され、入力するフィールドにフォーカスが置かれます。問題はキャプチャの検証です。一致する場合、フォームは正常に処理され、リードが DB に追加されます。ただし、テキストフィールドに入力されたセキュリティコードが生成されたコードと一致しない場合、エラーが表示されますが、フォーム情報は引き続き DB に追加されます。 . 「return false; // <= FUNCTION SHOULD EXIT HERE」が認識されていないようです。私のコードの何が問題なのかについて何か提案はありますか?

score 1 · Accepted Answer

これを試して

var phone = $（ "input＃phone"）。val（）; if（phone == ""）{$（ "label＃phone_error"）。show（）; $（ "input＃phone"）。focus（）; falseを返します。}

//Captcha validation
var security_code = $("input#security_code").val();
$.ajaxSetup({cache: false})
$.get('getsession.php', { requested: 'seccode' }, function(data) {
    var session = data;

    if (security_code !== session) {
        $("label#security_code_error").show();
        $("input#security_code").focus();
        alert('NO MATCH: ' + security_code + ' ' + session);
    } else {
        alert('MATCH!!!: ' + security_code + ' ' + session);
        var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
        $.ajax({
            type: "POST",
            url: "bin/process.php",
            data: dataString,
            success: function() {
                $('#contact_form').html("<div id='message'></div>");
                $('#message').html("<h2>Contact Form Submitted!</h2>")
                    .append("<p>We will be in touch soon.</p>")
                    .hide()
                    .fadeIn(1500, function() {
                        $('#message').append("<img id='checkmark' src='images/check.png' />");
                    });
            }
        });
    }
});

score 0 · Accepted Answer

return false実行を終了すると予想されるは、AJAX 要求のコールバック関数にあります。AJAX の最初の A は非同期を表すため、要求が成功の応答を返すまで関数は実行されません。

ただし、これは非同期であるため、AJAX リクエストを作成する残りの関数は引き続き実行されます。そのため、最初の AJAX 呼び出しとはまったく関係なく、フォームデータを送信するために別の AJAX POST リクエストを送信します。

コードの以下の部分を、キャプチャをチェックする AJAX リクエストのコールバック関数に移動し、検証が成功した場合にのみ実行する必要があります。

var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajax({
    type: "POST",
    url: "bin/process.php",
    data: dataString,
    success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>").append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
            $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
    }
});

コード全体は次のようになります。

var phone = $("input#phone").val();
if (phone == "") {
    $("label#phone_error").show();
    $("input#phone").focus();
    return false;
}

//Captcha validation
var security_code = $("input#security_code").val();
$.ajaxSetup({
    cache: false
})
$.get('getsession.php', {
    requested: 'seccode'
}, function(data) {
    var session = data;

    if (security_code !== session) {
        $("label#security_code_error").show();
        $("input#security_code").focus();
        alert('NO MATCH: ' + security_code + ' ' + session);
        return false; // <= FUNCTION SHOULD EXIT HERE
    } else {
        alert('MATCH!!!: ' + security_code + ' ' + session);
        // successful, so let's submit the details
        var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone;
        $.ajax({
            type: "POST",
            url: "bin/process.php",
            data: dataString,
            success: function() {
                $('#contact_form').html("<div id='message'></div>");
                $('#message').html("<h2>Contact Form Submitted!</h2>").append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
                    $('#message').append("<img id='checkmark' src='images/check.png' />");
                });
            }
        });
    }
});

score 0 · Accepted Answer

0

return関数の外では使用できません。

于 2012-10-01T14:35:54.223 に答える

jquery - jQuery関数が実行を停止しない

3 に答える 3

Related

Reference