Question

我有一个用于更新用户信息的网络表单，当他更新电子邮件时，会通过ajax()执行验证，以便在新电子邮件地址已被其他用户使用时向他发出警告。

我正在尝试在电子邮件正在使用时取消表单提交，但return false;不起作用。

if语句中的任何其他return false;工作正常，问题仅出在jQuery.ajax()调用中。

这是实际的代码：

var email = jQuery('#email').val();
jQuery.ajax({
    type : 'GET',
    url : '/ajax/verify-email.php?email=' + email,
    success : function( d ) {
        if( d == '1' ) {
            alert('Another user is using this email');
            jQuery('input[name="email"]').focus();
            return false; // this guy over here is not working!!!!
        }
    }
});

有没有人有解决方案？

Answer 1

AJAX中的A实际上非常重要。它代表异步。这意味着您触发了对服务器的请求，这可能需要一些时间来处理，之后您会收到响应。此响应发生在成功回调中。但由于这种情况比实际表单提交要晚得多，因此在回复之前，您的表单实际上已经提交。因此，从AJAX成功回调中返回false是没有任何意义的。你想要做的是从表单的提交处理程序返回false。让我们看看我们如何实现这一点。

您可以订阅表单的.submit处理程序并发送AJAX请求以验证电子邮件是否已被采用，如果未采用手动触发在成功AJAX中提交表单回调：

$('form').submit(function() {
    // we send an AJAX request to validate the unicity of the email
    $.ajax({
        url: '/ajax/verify-email.php',
        type: 'POST',
        data: { email: $('#email').val() },
        // we set the context to the form so that inside
        // the success callback 'this' points to the form
        context: this,
        success: function(result) {
            if (result != '1') {
                // If the server send something different than 1
                // we know that the email is unique and trigger
                // the submission of the form using the underlying
                // DOM element to avoid calling the .submit handler
                // recusrively
                this.submit();
            } else {
                // The email is not unique => we are informing
                // the user that the email is already in use
                alert('Another user is using this email');
                $('#email').focus();
            } 
        }
    });

    // we cancel the normal submission of the form    
    return false;
});

也绝不依赖客户端验证。表单成功提交到服务器后，请确保您正在执行email is unique检查。如果您使用的是通过电子邮件字段中的唯一约束轻松实现的SQL数据库。

Answer 2

您在此处运行异步代码。在你试图返回虚假的那一刻，它已经很晚了。您的函数已返回undefined。如果要处理成功的结果，则需要提供回调。

Answer 3

你应该使用event.preventDefault（），如下所示。

$('#form').submit(function(event) {
    $.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) {
        if (d == '1') {
            alert('Another user is using this email');
            $('#email').focus();
            event.preventDefault();
        }
    });   
});

Answer 4

在这种情况下你不应该使用.submit()，而是使用标记系统，.submit()只应用于<form>元素。

var email = jQuery('#email').val();
var flag = 0;
jQuery.ajax({
    type : 'GET',
    url : '/ajax/verify-email.php?email=' + email,
    async: false,
    success : function( d ) {
        if( d == '1' ) {
            alert('Another user is using this email');
            jQuery('input[name="email"]').focus();
            flag = 1;
        }
    }
});
if(flag == 1) return false;

Answer 5

<form action="yourpage" method="post" onsubmit="return matchpass();">
  <div>
   <label> Name</label>
   <input type="text" name="name" id="name">
  </div>
  <div>
   <label> Email ID</label>
   <input type="email" name="email" id="email">            
  </div>
  <div>
   <label> Mobile No</label>
   <input type="text" name="mob"  maxlength="10" onkeyup="check_if_exists();" autocomplete="off" id="mob">
  </div>                             
  <div>
   <button type="button" >Send</button>
  </div>
  <span id="err"></span>
  <div>
   <label> OTP</label>
   <input type="password" name="otp" id="otp"  maxlength="6" placeholder="****">
   <span id="err2"></span>
  </div>    
  <div>
   <input type="reset" value="Reset" class="reset-btn">
   <input type="submit" name="submit" id="submit" value="Submit" >              
  </div>
</form>
<input type="hidden"  id="otpcheck"/>



<script>
function matchpass()
{

     $.ajax({   
    type:"post",
    url: "yourpage",
    data:{ mobile:mob,otp:otp},
    success:function(data)
    {
       if(data==1)
       {
           document.getElementById("otpcheck").value=1; //important
       }else{

           document.getElementById("err2").style.color = "red";
           document.getElementById("err2").innerHTML = "invalid OTP Number ";
         document.getElementById("otpcheck").value=0; //important
       }


    }
    });

    if(document.getElementById("otpcheck").value==0){
        return false;
    }

}

Answer 6

$('form').submit(function() {
// we send an AJAX request to validate the unicity of the email
$.ajax({
    url: '/ajax/verify-email.php',
    type: 'POST',
    data: { email: $('#email').val() },
    // we set the context to the form so that inside
    // the success callback 'this' points to the form
    context: this,
    success: function(result) {
        if (result != '1') {
            // If the server send something different than 1
            // we know that the email is unique and trigger
            // the submission of the form using the underlying
            // DOM element to avoid calling the .submit handler
            // recusrively
            this.submit();
        } else {
            // The email is not unique => we are informing
            // the user that the email is already in use
            alert('Another user is using this email');
            $('#email').focus();
        } 
    }
});

// we cancel the normal submission of the form    
return false;

}）;

Answer 7

好像你没有真正理解jQuery的想法。你不需要使用return false，而不是那里。您可以致电event.preventDefault();：

$('#form').submit(function(event) {
    $.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) {
        if (d == '1') {
            alert('Another user is using this email');
            $('#email').focus();
        }
    });

    event.preventDefault();
});

请参阅this example。

返回False在jQuery.ajax中不起作用

7 个答案: