Ajax 回调未执行

Question

我有一个打算使用 Ajax 提交的表单页面。我的计划是 1. 使用 Ajax 检查电子邮件是否已经存在 2.检查密码是否匹配 3.如果是，切换到另一个“屏幕”并 4. 使用Ajax提交表单

我很困惑，因为验证功能没有运行。当密码不匹配时，它既不会切换屏幕也不会发出警报。因此，表单也不会被提交。我的代码在下面

$('form input:last-child').click(function(e){
    e.preventDefault();
    var allFields = e.target.parentNode;

    function validate () {
        if (allFields.elements[3].value !== allFields.elements[4].value) {
            return false; // If they don't match, return false
        } else {
            $('#form-div form').css('left', '-70%');
            $('#confirm p').css('margin-left', '-12%'); // else switch screens
        }
    }
    if (validate != false) {
        $('#hidden').load("server_script.php"); // `hidden` is a hidden div somewhere on the page
    } else 
        alert ("Passwords do not match");
});

我在想，如果它们不匹配，则事件侦听器的其余部分将不会运行，因为 false 从那时起终止函数。所以我尝试在事件监听器之外创建一个 validate 函数的实例，并在 click 函数中调用它，但由于依赖变量它不会解析，所以我不知道该怎么做。

更新 附上相关的 HTML。 （奖励：正则表达式模式不匹配 2 个或更多字母）

<div id=form-div>
<form method=POST action="" >
First Name: <br> <input type=text name=first_name pattern="[a-z]{2,}" required /> <br> <br>
Last Name: <br> <input type=text name=last_name pattern="[a-z]{2,}" required /> <br> <br>
Email: <span id=emailReport></span> <br> <input type=email name=email id=email required /> <br> <br>
Password: <br> <input type=password name=password required pattern=".{6,}" title="Password must be six or more characters" /> <br> <br>
Confirm password: <br> <input type=password name=password required /> <br> <br>
<input type=hidden name=sign_up_date />
<input type=submit value='sign up' />
</form>

<div id=confirm> <p>Some text</p> </div>
</div>

</div>

Answer 1

您忘记调用“验证”函数。 从您的代码看来，您只是声明了该函数而没有执行他。

Answer 2

validate 函数未被调用。为什么不简单地删除函数定义，使代码成为click 函数的一部分？

Answer 3

您没有正确调用验证函数

函数调用必须有()，即validate()，而不是validate

$('form input:last-child').click(function(e){
    e.preventDefault();
    var allFields = e.target.parentNode;

    function validate () {
        if (allFields.elements[3].value !== allFields.elements[4].value) {
            return false; // If they don't match, return false
        } else {
            $('#form-div form').css('left', '-70%');
            $('#confirm p').css('margin-left', '-12%'); // else switch screens
        }
    }

    //if (validate != false) {
    if (validate() != false) {  
        $('#hidden').load("server_script.php"); // `hidden` is a hidden div somewhere on the page
    } else 
        alert ("Passwords do not match");
});