Question

我有一个表单，当提交时，如果任何字段为空id，则阻止提交并向该字段添加一个类。

出于某种原因，我似乎无法将其付诸实践，我添加了一个小提琴，任何人都可以指出我的错误吗？

Answer 1

你的小提琴有几个问题。首先，您尚未关闭ready事件处理程序。其次，将$this传递给jQuery，即undefined。您需要改为this。

最后，表单始终会被提交，因为您必须实际停止提交。您可以调用事件对象的preventDefault方法来执行此操作。这是您的代码的新版本：

$(document).ready(function(){
    $("#form").submit(function(e) {
        $('input').each(function() {
            if ($(this).val() == '') { //Pass this into jQuery, not $this
                $(this).addClass('highlight');
                e.preventDefault(); //Stop the form from submitting
            }
        });              
    });
});

另请注意，在$(this).val()循环中不必使用each。 this将是对DOM元素的引用，并且该元素将具有value属性，因此仅使用this.value会更有效。

Answer 2

您没有停止实际提交表单，因此它仍然会被发布（因此会立即删除您的突出显示）。尝试将preventDefault方法添加到表单中，并在检查错误后手动提交。

Answer 3

除了不调用preventDefault之外，您在一个地方使用$this而不是this且括号不匹配。工作版：

http://jsfiddle.net/yycqW/7/

Answer 4

$(document).ready(function() {
    $("#form").submit(function(e, a) {
        $('input, textarea', this).each(function() {
            if (!$(this).val()) {
                $(this).addClass('highlight');
                e.preventDefault();
            } else($(this).hasClass('highlight')) ? $(this).removeClass('highlight') : false; // remove class on valid
        });
    });
});

Answer 5

而不是preventDefault（），在提交时调用表单的函数中返回false也会阻止提交。在上一个答案中，让我们认为有多个空字段，preventDefault（）将不必要地多次触发。

我会使用这样的东西作为更清洁的解决方案：

$(document).ready(function(){
    $("#form").submit(function(e) {
            var submit=true; //A flag that we'll return
            $('input').each(function() {
                if ($(this).val() == '') { 
                    $(this).addClass('highlight');
                    submit=false //Setting the flag to false will prevent form to be  submitted
                }
            });
            return submit;  
    });
});

jQuery没有停止提交表单

5 个答案: