获取空输入的正确标签答案

【问题标题】：Get the correct label of an empty input获取空输入的正确标签
【发布时间】：2012-12-08 09:33:55
【问题描述】：

朋友们，

我有一个如下表格；

<form method="post" id="contact_form" action="">
<label for="name">Name</label>
<input type="text" name="name"  id="name" />

<label for="email">Email</label>
<input type="text" name="email" id="email" />

<label for="purpose">Purpose</label>
<input type="text" name="purpose" id="purpose"  />                              

    <input type="submit" value="Submit"/> 
</form>

当我提交表单时，我想识别并添加一个名为“错误”的类，仅用于使用 jQuery 具有空值的输入标签。

请帮我解决这个问题。

感谢和问候，鲁申。

【问题讨论】：

What have you tried?
如果您正在提交表单，该页面将被拆除并替换为表单提交的结果（除非您使用未向我们显示的代码通过 ajax 提交） .如果您提供更完整的问题说明以及您尝试解决问题的方式，我们可能会提供帮助。

标签： jquery validation input label

【解决方案1】：

.homework {
   color: red;
}

$('#contact_form').submit(function(){ // listen to the submit event
    var err = 0;  // define a varible with initial value of 0
    $('input[type=text]', this).each(function(){ // iterate through the text inputs
       var val = $.trim(this.value); // trim and store the value
       // if the value is empty add a class to the previous label otherwise remove it(is it has)
       $(this).prev().toggleClass('homework', !val ); 
       if (!val) err++; // if the value is empty add 1 to the err variable  
    })
    return !err; // return false if there is one or more empty field(s)
})

【讨论】：

非常感谢，这按预期工作正常。但我不明白它的工作方式。我是 jQuery 新手，如果您能解释一下，我将不胜感激。

【解决方案2】：

试试这个：

$('#contact_form').submit(function() {
    $(this).find("input:text").each(function() {
        if ($.trim($(this).val()) == '') {
            $(this).css({ border: "2px red solid" });
            return false;
        }
    })
});

【讨论】：

【解决方案3】：

$('form#contact_form').submit(function(){
    if($('#name').val() == ''){
        $('label[for="name"]').addClass('error');
        return false;
    } else if($('#email').val() == ''){
        $('label[for="email"]').addClass('error');
        return false;
    } else if($('#purpose').val() == ''){
        $('label[for="purpose"]').addClass('error');
        return false;
    }
    return true;
});

【讨论】：