不存在错误时不提交jQuery表单

我有一个html表单和一些验证表单的jQuery。如果所有的验证都通过了，我想提交表格。当我按submit时，会出现错误消息（如果有错误），但是，当没有错误消息时，submit按钮会暂停，我会收到错误消息

无响应脚本错误

我在firefox和safari中都得到了相同的结果

jQuery（errors div是所有错误出现的地方）：

$（“#joinForm”）。关于（“提交”，函数（e）{
e、 预防默认值（）；
if（！$（'：text'）.val（）|；！$（'：password'）.val（））{
$（'#fillIn'）。删除（）；
$（'#errors'）。追加（“
请填写所有字段”
”；
}
否则{
$（'#fillIn'）。删除（）；
}
如果（$（'#email'）.val（）！=$（'#reemail'）.val（））{
$（“#noMatch”）.remove（）；
$（“#错误”）。追加（
电子邮件不匹配
”；
}
否则{
$（“#noMatch”）.remove（）；
}
如果（$（'#email'）.val（）=$（'#reemail'）.val（）&&$（':text'）.val（）&&$（':password'）.val（））{
$（'#joinForm'）。提交（）；
}
否则{
$（'errorModal'）.modal（'show'）；
}
});
});

HTML:

全名：
电邮：
重新键入电子邮件：
新密码：

e.preventDefault（）阻止表单提交，然后您手动调用

submit（）

，这将触发另一个

submit

事件，从而得到一个无限循环

要解决此问题，请仅在表单无效时调用

preventDefault

$("#joinForm").on("submit", function (e) {
        var isValid = true;

        if (!$(':text').val() || !$(':password').val()){
            isValid = false;
            $('#fillIn').remove();
            $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
        }
        else {
            $('#fillIn').remove();
        }


        if ($('#email').val()!= $('#reemail').val()){
            isValid = false;
            $('#noMatch').remove();
            $('#errors').append("<p id='noMatch'>Emails do not match</p>");
        }
        else{
            $('#noMatch').remove();
        }


        if (isValid && $('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
           // pass
        }
        else{
            $('#errorModal').modal('show');
            e.preventDefault();
        }

    });

});

$（“#joinForm”）。关于（“提交”，函数（e）{
var isValid=true；
if（！$（'：text'）.val（）|；！$（'：password'）.val（））{
isValid=false；
$（'#fillIn'）。删除（）；
$（'#errors'）。追加（“
请填写所有字段”
”；
}
否则{
$（'#fillIn'）。删除（）；
}
如果（$（'#email'）.val（）！=$（'#reemail'）.val（））{
isValid=false；
$（“#noMatch”）.remove（）；
$（“#错误”）。追加（
电子邮件不匹配
”；
}
否则{
$（“#noMatch”）.remove（）；
}
如果（isValid&&$（'#email'）.val（）=$（'#reemail'）.val（）&&&$（'：text'）.val（）&&$（'：password'）.val（））{
//通过
}
否则{
$（'errorModal'）.modal（'show'）；
e、 预防默认值（）；
}
});
});

e.preventDefault（）阻止表单提交，然后您手动调用

submit（）

，这将触发另一个

submit

事件，从而得到一个无限循环

要解决此问题，请仅在表单无效时调用

preventDefault

$("#joinForm").on("submit", function (e) {
        var isValid = true;

        if (!$(':text').val() || !$(':password').val()){
            isValid = false;
            $('#fillIn').remove();
            $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
        }
        else {
            $('#fillIn').remove();
        }


        if ($('#email').val()!= $('#reemail').val()){
            isValid = false;
            $('#noMatch').remove();
            $('#errors').append("<p id='noMatch'>Emails do not match</p>");
        }
        else{
            $('#noMatch').remove();
        }


        if (isValid && $('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
           // pass
        }
        else{
            $('#errorModal').modal('show');
            e.preventDefault();
        }

    });

});

$（“#joinForm”）。关于（“提交”，函数（e）{
var isValid=true；
if（！$（'：text'）.val（）|；！$（'：password'）.val（））{
isValid=false；
$（'#fillIn'）。删除（）；
$（'#errors'）。追加（“
请填写所有字段”
”；
}
否则{
$（'#fillIn'）。删除（）；
}
如果（$（'#email'）.val（）！=$（'#reemail'）.val（））{
isValid=false；
$（“#noMatch”）.remove（）；
$（“#错误”）。追加（
电子邮件不匹配
”；
}
否则{
$（“#noMatch”）.remove（）；
}
如果（isValid&&$（'#email'）.val（）=$（'#reemail'）.val（）&&&$（'：text'）.val（）&&$（'：password'）.val（））{
//通过
}
否则{
$（'errorModal'）.modal（'show'）；
e、 预防默认值（）；
}
});
});

将上一条if语句切换为：

    if (!($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val())){
        $('#errorModal').modal('show');
        e.preventDefault();
    }

同时从代码顶部删除

e.preventDefault（）

---

这只是将逻辑更改为“如果有错误，请显示模式并停止提交。否则，请继续提交”

将上一条If语句切换为：

    if (!($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val())){
        $('#errorModal').modal('show');
        e.preventDefault();
    }

同时从代码顶部删除

e.preventDefault（）

---

这只是将逻辑更改为“如果我们有错误，请显示模式并停止提交。否则，请继续提交”

尝试以下操作：

$('#joinForm').submit(function(){

    if (!$(':text').val() || !$(':password').val()){

        $('#fillIn').remove();
        $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
    }
    else {
        $('#fillIn').remove();
    }


    if ($('#email').val()!= $('#reemail').val()){
        $('#noMatch').remove();
        $('#errors').append("<p id='noMatch'>Emails do not match</p>");
    }
    else{
        $('#noMatch').remove();
    }


    if ($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
        $('#joinForm').submit();
    }
    else{
        $('#errorModal').modal('show');
    }

    return false;
});

$（'#joinForm'）。提交（函数（）{
if（！$（'：text'）.val（）|；！$（'：password'）.val（））{
$（'#fillIn'）。删除（）；
$（'#errors'）。追加（“
请填写所有字段”
”；
}
否则{
$（'#fillIn'）。删除（）；
}
如果（$（'#email'）.val（）！=$（'#reemail'）.val（））{
$（“#noMatch”）.remove（）；
$（“#错误”）。追加（
电子邮件不匹配
”；
}
否则{
$（“#noMatch”）.remove（）；
}
如果（$（'#email'）.val（）=$（'#reemail'）.val（）&&$（':text'）.val（）&&$（':password'）.val（））{
$（'#joinForm'）。提交（）；
}
否则{
$（'errorModal'）.modal（'show'）；
}
返回false；
});

请参见结尾：

$('#joinForm').submit(function(){

    if (!$(':text').val() || !$(':password').val()){

        $('#fillIn').remove();
        $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
    }
    else {
        $('#fillIn').remove();
    }


    if ($('#email').val()!= $('#reemail').val()){
        $('#noMatch').remove();
        $('#errors').append("<p id='noMatch'>Emails do not match</p>");
    }
    else{
        $('#noMatch').remove();
    }


    if ($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
        $('#joinForm').submit();
    }
    else{
        $('#errorModal').modal('show');
    }

    return false;
});

返回false

---

再见

试试这个：

$('#joinForm').submit(function(){

    if (!$(':text').val() || !$(':password').val()){

        $('#fillIn').remove();
        $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
    }
    else {
        $('#fillIn').remove();
    }


    if ($('#email').val()!= $('#reemail').val()){
        $('#noMatch').remove();
        $('#errors').append("<p id='noMatch'>Emails do not match</p>");
    }
    else{
        $('#noMatch').remove();
    }


    if ($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
        $('#joinForm').submit();
    }
    else{
        $('#errorModal').modal('show');
    }

    return false;
});

$（'#joinForm'）。提交（函数（）{
if（！$（'：text'）.val（）|；！$（'：password'）.val（））{
$（'#fillIn'）。删除（）；
$（'#errors'）。追加（“
请填写所有字段”
”；
}
否则{
$（'#fillIn'）。删除（）；
}
如果（$（'#email'）.val（）！=$（'#reemail'）.val（））{
$（“#noMatch”）.remove（）；
$（“#错误”）。追加（
电子邮件不匹配
”；
}
否则{
$（“#noMatch”）.remove（）；
}
如果（$（'#email'）.val（）=$（'#reemail'）.val（）&&$（':text'）.val（）&&$（':password'）.val（））{
$（'#joinForm'）。提交（）；
}
否则{
$（'errorModal'）.modal（'show'）；
}
返回false；
});

请参见结尾：

$('#joinForm').submit(function(){

    if (!$(':text').val() || !$(':password').val()){

        $('#fillIn').remove();
        $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
    }
    else {
        $('#fillIn').remove();
    }


    if ($('#email').val()!= $('#reemail').val()){
        $('#noMatch').remove();
        $('#errors').append("<p id='noMatch'>Emails do not match</p>");
    }
    else{
        $('#noMatch').remove();
    }


    if ($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
        $('#joinForm').submit();
    }
    else{
        $('#errorModal').modal('show');
    }

    return false;
});

返回false

---

再见

您应该使用

e.prev