JavaScript 表单验证问题 - 必须单击两次提交答案

【问题标题】：JavaScript form validation issue - submit has to be clicked twiceJavaScript 表单验证问题 - 必须单击两次提交
【发布时间】：2014-09-26 22:58:27
【问题描述】：

验证的JavaScript代码-https://freedigitalphotos.net/images/js/judd-validate.js

我们的网站上有一些具有客户端 JavaScript 验证的新表单。

当用户从表单字段“散焦”时触发验证。验证是 AJAX（检查数据库以获取有效用户名等）和 JavaScript（检查字段不为空，或包含预期数据）的组合。

用户必须点击表单提交按钮两次才能发送表单。似乎第一次单击触发了字段验证但未提交表单。再次点击即可成功完成表单。

转到-https://freedigitalphotos.net/images/recover_password.php 在电子邮件字段中输入 arifkpi@gmail.com，然后立即点击提交。再次注意，第一次单击仅验证输入，使用 AJAX 检查电子邮件地址是否在数据库中。需要再次点击。

我想解决这个问题，所以只需单击一下即可一切正常。

【问题讨论】：

对我有用：Chrome 36.0.1985.125 - 也许您的 ajax 请求需要更长的时间才能响应？填写表单并提交时，打开控制台并观察网络活动

标签： javascript php jquery ajax validation

【解决方案1】：

您可以在按钮的click 上调用它，而不是在focustout 事件上调用Ajax 验证，如果Ajax 返回真结果，则以编程方式形成submit。参考几个示例代码行：

HTML部分：

<form method="post" id="registration_form" name="registration_form" action="register.php">
  EmailId: <input type="text" id="email_id" name="email_id">
  <label class="error" for="username" id="globalErrorUsername"></label>
  Username: <input type="text" id="username" name="username">
  <label class="error" id="globalErrorEmail"></label>
  <button type="button" id="register_btn" name="register_btn">Register</button>
</form>

JS部分：

$("#register_btn").click(function() {
    //.valid function is useful when you are using jquery Validate library for other field validation
    if ($('#registration_form').valid()) {
        var email_id = $('#registration_form').find('#email_id').val(),
            username = $('#registration_form').find('#username').val();
        $.ajax({
            beforeSend: function() {
                $('#globalErrorUsername').html('');
                $('#globalErrorEmail').html('');
             }, //Show spinner
            complete: function() {  },
            type : 'post',
            url : 'check-user-existence.php',
            dataType :'json',
            data : 'email_id=' + email_id + '&username=' + username,
            success:function(response) {
                if(response.success == 1) {
                    //submit the form here
                    $("#registration_form").submit();
                } else if (response.error == 1) {
                    if(response.details.username != undefined) {
                        $('#globalErrorUsername').show();
                        $('#globalErrorUsername').html(response.details.username);
                    }
                    if(response.details.email_id != undefined) {
                        $('#globalErrorEmail').show();
                        $('#globalErrorEmail').html(response.details.email_id);
                        $('#email_id').focus();
                    } else {
                        $('#username').focus();
                    }

                }
            }
        });
    } else {
        return false;
    }
    return false;
});

【讨论】：