jQuery验证后表单提交答案

【问题标题】：Form submit after jquery validationjQuery验证后表单提交
【发布时间】：2015-02-11 08:15:16
【问题描述】：

我有一个带有 jquery 验证的表单。如果我单击提交按钮，它将触发 jquery 验证，如果没有错误，我希望它继续正常提交过程。（运行表单 action="process.php"...）。但是当我单击提交按钮并且没有错误时，它什么也不做。

这是我的简单 html 表单：

<form action="process.php" method="post">
    <input type="text" id="name"/>
    <input type ="submit" id="ok" name="ok" />
    <div class='error_message'></div>
</form>

这是我的 jquery 代码：

$(document).ready(function(){
    $('#name').focus(); 
    $('#ok').click(function(){
        var name = $('#name'); 
        var error_message = $('.error_message'); 
        if (name.val() == '') { 
            name.focus();
            error_message.html('Name is required!');
            return false;
        }
        else {
            return false;
        }
    });
});

【问题讨论】：

考虑同时使用 jquery-validation 和 ajax-form-submit 插件。
我的表单也有 input=file 并且 ajax 不适用于这种情况，不是吗？
它有效。您需要使用多部分表单数据标头进行发布请求:)

标签： jquery

【解决方案1】：

这两种情况都会导致提交按钮上的点击处理程序导致事件停止。删除else 块：

$('#ok').click(function(){
    var name = $('#name'); 
    var error_message = $('.error_message'); 
    if (name.val() == '') { 
        title.focus();
        error_message.html('Name is required!');
        return false;
    }
});

或者更好的是，挂钩到表单的submit 事件：

$('form').submit(function(e) {
    var error_message = $('.error_message'); 
    if ($('#name').val() == '') { 
        title.focus();
        error_message.html('Name is required!');
        e.preventDefault(); // stop form submission
    }
});

另外，title 和 error_message 似乎没有在您的代码中定义。我假设它们是在范围内的其他地方声明的。

【讨论】：

$('form').submit(function(e)。 'form' 是表单的名称还是表单的 ID？
表单与表单元素相关
我试图挂钩表单的提交事件，但是当我填写名称并单击提交时。它不会继续提交表单，以某种方式再次关注名称字段？
抱歉，现在可以使用了。我忘了把 action="process.php" 放在表单标签里。

【解决方案2】：

使用提交function：

$(document).ready(function(){
$('#name').focus(); 
$('form').submit(function(e){
    var name = $('#name'); 
    var error_message = $('.error_message'); 
    if (name.val() == '') { 
        title.focus();
        error_message.html('Name is required!');
        e.preventDefault(); // stop submitting the form
    }
});});

【讨论】：