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()而不是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");
});

Answer 3

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

Ajax回调没有执行

3 个答案: