Question

如果用户未输入信息或输入错误，我不希望我的表单提交。当我点击提交按钮时，它会提交它。我在javascript中有一些应该这样做的代码。我从另一个表单验证中复制了它，但它在我的工作中不起作用。

这是我为提交按钮添加的内容：

var submitButton = document.querySelector('#submit');

submitButton.onclick = function(){
    var nameIsValid = checkName();
    var emailIsValid = checkEmail();
    var passwordIsValid = checkPassword();

    var valid = nameIsValid && emailIsValid && passwordIsValid;

    // stop default action if valid still equals false
    return valid;
}

你可以在我的小提琴中查看我的完整代码： http://jsfiddle.net/pXLPv/

Answer 1

我总是在<form>本身的onSubmit中包含检查例程，例如

<form method=get action="formhandler.asp" onSubmit="return checkForm(this);">

这样做的好处是可以为你提供范围，而且我不需要回顾任务。

希望有所帮助！

Answer 2

将按钮类型更改为按钮。因为我相信您的默认表单提交发生并且提交 Click事件无法正常工作。

<input type="button" id="submit" value="Submit"/>

或者您也可以使用Javascript的表单提交事件。 Demo

Updated Fiddle

Answer 3

我会考虑使用JQuery和Validator插件。 JQuery的主要优点是preventDefault（）方法，它可以阻止按钮按原样触发。使用Validator，您将检查表单是否有效，如果是，请提交表单。您也可以这样使用AJAX。如果表单无效，您将返回即时反馈。一旦我不在手机上，我可以稍后发布一个例子。

Answer 4

将您提交的button类型更改为按钮。

<input type="button" id="btn_id" value="Submit"/>

然后使用jQuery作为

$('#btn_id').click(function(){
    var nameIsValid = checkName();
    var emailIsValid = checkEmail();
    var passwordIsValid = checkPassword();

    var valid = nameIsValid && emailIsValid && passwordIsValid;

    if(!valid)
    {
        alert('Invalid Fields');
    }
    else
    {
        $('#form_id').submit();
    }
});

信息不正确/未输入时提交表单

4 个答案: