Question

我在所有代码上使用以下或类似的设置。我意识到，如果你跳过所有字段并且只输入最后一个字段，无论最后一个字段是什么..表单提交..我想阻止表单提交，如果细节（标志是1）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>

<form name="m2mform" id="m2mform" method="post" onsubmit="return form()" >
u:<input id="user" name="user" type="text" value="">
email:<input id="email" name="email" type="text" value="">
<input class="submitx" type="button" onClick="javascript:form();"/>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
flag = 1;
function form() {
    if (document.getElementById("user").value == "") {
        // slidedown some red css
        flag = 1;
    } else {
        // dont show red css 
        flag = 0;
    }
    if (document.getElementById("email").value == "") {
        // slidedown some red css
        flag = 1;
    } else {
        // dont show red css 
        flag = 0;
    }
    if (flag == 1) {
        // dont submit form
    }
    else {
        var submitForm;
        submitForm = document.getElementById("m2mform");
        submitForm.submit();
    }
}
</script>
</body>
</html>

更新了另一次尝试：

var flag = 0;
function nValidateForm() {
    var flag = 0;
    if (document.getElementById("fullname").value == "") {
        $('#fullnamefail').slideDown("fast");
        flag = 1;
    }
    else {
        $('#fullnamefail').slideUp("fast");
        flag = 0;
    }

    if (flag == 1) {
        $('#error').fadeIn('slow');
        return false;
    }
    else {
        var custForm;
        custForm = document.getElementById("m2mform");
        custForm.submit();
    }
}

Answer 1

你在这里错过return false; ...而是使用type="submit"代替type="button"（你不需要两次声明form()的方法调用，如果您正确使用类型submit）

例如类型button：

<form method="post" onSubmit="return form();">
    u:<input id="user" type="text" value=""><br />
    email:<input id="email" type="text" value=""><br />
    <input id="submit" type="button" value="submit" onClick="window.submitFromButton();" />
</form>
<script type="text/javascript">
window.form = function(sender) {
    var $user = $('#user');
    var $email = $('#email');
    $user.css('background-color', 'white');
    $email.css('background-color', 'white');
    var submitTheForm = true;
    if (!$user.val()) {
        $user.css('background-color', 'red');
        submitTheForm = false;
    }
    if (!$email.val()) {
        $email.css('background-color', 'red');
        submitTheForm = false;
    }
    return submitTheForm;
};
window.submitFromButton = function() {
    var $form = $('form');
    $form.submit();
}
</script>

请参阅我的工作示例here
以样式here查看我的工作示例请参阅我的工作示例button here

Answer 2

你的逻辑是有缺陷的。如果已经提升（等于1），则不得降低标志（更改为0）。此外，您不应该再次直接调用submit()，只返回true或false。

修复原始代码的最小更改：

flag = 0; //lower by default
if (document.getElementById("user").value == "") {
    // slidedown some red css
    flag = 1;
} else {
    // dont show red css 
}

if (document.getElementById("email").value == "") {
    // slidedown some red css
    flag = 1;
} else {
    // dont show red css 
}
if (flag == 1) {
    // dont submit form
    return false;
}
else {
    return true;
}

这只是将标志设置为0只在顶部，并且任何验证错误都会导致标志被引发。

这将有效，但是当你已经在使用jQuery时，请考虑使用它的功能......只需谷歌进行“jQuery表单验证”，这是验证用户输入的非常强大而简单的方法。

Answer 3

要取消事件触发，当您不想在return false;函数中提交表单时，需要form()：

<input class="submitx" type="button" onClick="javascript:form();"/>

function form() {

    ....    

    if (flag == 1) {
        return false;  // this will cancel the click event firing on the submit button
    }
    else {
        var submitForm;
        submitForm = document.getElementById("m2mform");
        submitForm.submit();
    }
}

输入按钮不在Jquery表单上工作

3 个答案: