我可以为我的 div 标签添加额外的错误类吗？答案

【问题标题】：Can I add an additional error class for my div tags?我可以为我的 div 标签添加额外的错误类吗？
【发布时间】：2012-01-20 19:09:52
【问题描述】：

我有一个用twitter's bootstrap 套件构建的大表格。字段如下所示：

<div class="clearfix">
    <label for="state_id">State</label>
    <div class="input">
        <select id="state_id" name="state">
           <option value="122">Alabama</option><option value="123">Alaska</option><option value="124">Arizona</option> 
        </select>
    </div>
</div><!-- /clearfix -->
<div class="clearfix">
    <label for="city_id">City</label>
    <div class="input">
        <input type="text" id="city_id" name="city" value="" />
    </div>
</div><!-- /clearfix -->

他们提供了一个错误类，以红色突出显示该字段，如下所示：

<div class="clearfix error">
    <label for="state_id">State</label>
    <div class="input">
        <select id="state_id" name="state">
             <option value="122">Alabama</option><option value="123">Alaska</option><option value="124">Arizona</option> 
        </select>
    </div>
</div><!-- /clearfix -->

有没有办法使用 jquery 并验证我的表单字段并在需要时添加此类？

我的 jquery 调用很简单：

$('#form_submit').click(function(){

    var formValid = true;

    $("div.clearfix").each(function() {
            // 
    });
});

【问题讨论】：

jQuery 和 JavaScript 在客户端工作，而不是在服务器端工作。您能否发布您的浏览器看到的生成的 HTML（查看源代码），而不是服务器端的 PHP 脚本？
我想在客户端验证它。我基本上只需要验证是否输入了一个值并且字段不为空。
是的。我可以重复我的请求吗：您能否发布您的浏览器看到的生成的 HTML（查看源代码），而不是服务器端的 PHP 脚本？
还有你的 JavaScript/jQuery 吗？（对不起，我不是试图挑剔，但我忘了问前两次......唉...... =/）。
别担心，jquery 还没有点击事件

标签： jquery twitter-bootstrap

【解决方案1】：

也许您可以考虑使用 jquery 验证plugin 来制定验证规则。真的是一个强大的插件。

示例：

$("input [type='text']").rules("add", { minlength: 2 });

所以，当您调用$("form").validate() 时，此函数会返回所有无效字段。

【讨论】：

【解决方案2】：

您可以使用上述插件或任何其他方式验证您的表单，然后如果您发现验证错误，请使用

 $("#city_id_input_div").addClass("error");

您必须将 id 分配给需要应用“错误”类的每个 div。

例如

<div class="clearfix" is="city_id_input_div">
<label for="city_id">City</label>
<div class="input">
    <input type="text" id="city_id" name="city" value="" class="large" onclick="removeErrorClass('city_id_input_div');" onkeypress="removeErrorClass('city_id_input_div');"/>
</div>

  function removeErrorClass(id)
  {  
    $("#"+id).removeClass("error"); 
  }

这是我动态使用 Bootstrap 的“错误”类并动态删除该类的方法。

【讨论】：