Question

所以我有一个登录表单。我想要的是我目前正在使用action =“”等提交表单，使用onSubmit，即使我在javascript函数validate（）中进行了表单验证。目前虽然它将提交表格并同时验证。我想要发生的是它不提交表单，或者在我们进入验证功能后立即取消它。然后，如果表格有效，请提交表格。

这是我想要做的事情的逻辑

function validate() {
    stopFormSubmit();

    var username = $("#username").val();
    var password = $("#password").val();

    if(username != "" && password != "") {
        submitForm();
    } else {
        displayErrors();
    }
}

我的表单看起来像这样

<form onSubmit="validate()" name="basicForm" id="basicForm" class="basicForm" action="login.php" method="post" autocomplete="off">

有没有这样做？

Answer 1

表单确认然后提交。验证只需要很少的时间。

您真正想要做的是在验证失败时停止表单。

使用内部事件属性，返回false以停止提交的表单。由于这是由验证成功决定的，因此您需要从true返回false或validate，然后从事件处理程序返回。

onSubmit="return validate()"

和

function validate() {

    var username = $("#username").val();
    var password = $("#password").val();

    if(username != "" && password != "") {
        return true;
    } else {
        displayErrors();
        return false;
    }
}

现代代码将使用不显眼的JavaScript并以编程方式绑定事件处理程序。然后它将使用Event对象来控制发生在默认行为上的事件。由于您已经在使用jQuery，我们可以使用它来执行事件绑定。

完全删除onsubmit属性。

jQuery('form').on('submit', validate); // Run this after the form exists in the DOM

和

function validate(evt) {

    var username = $("#username").val();
    var password = $("#password").val();

    if(username != "" && password != "") {
        // Do nothing
    } else {
        displayErrors();
        evt.preventDefault();
    }
}

Answer 2

如果可能的话，我建议使用jQuery Validation插件。

另一个想法 - 像here这样做：
1. onSubmit="return validate()"
2.更新功能：

function validate() {
    var username = $("#username").val();
    var password = $("#password").val();

    if(username != "" && password != "") {
        submitForm();
        // or you can simply return true to allow form data submitting
    } else {
        displayErrors();
        return false;
    }
}

取消表单提交，然后再次提交

2 个答案: