Question

我有一个带有jquery验证的表单。如果我点击提交按钮，它将触发jquery验证，如果没有错误，我希望它继续正常提交procudure。（运行form 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;
        }
    });
});

Answer 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似乎未在您的代码中定义。我假设他们被宣布在范围内的其他地方。

Answer 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
    }
});});

表单在jquery验证后提交

2 个答案: