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


JavaScript form validation issue - submit has to be clicked twice

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

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

当用户从表单字段"散焦"时触发验证。验证是AJAX(检查数据库是否有有效的用户名等)和JavaScript(检查字段是否为空,或包含期望的数据)的组合。

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

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

我想修复这个,所以一切都将工作与一个单一的点击

而不是调用Ajax验证的focustout事件,你可以调用它的click的按钮,如果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;
});