jquery 按类查找输入以进行验证

Question

我正在使用 jquery 验证插件来验证表单。我将表单分解为选项卡，当您单击下一步按钮时，您只能导航到下一个选项卡。在下一个按钮的 onclick 事件期间，我想确保当前选项卡没有错误。

选项卡由类 form_group 标记。默认选项卡 html 如下所示：

<div id="tab-1" class="form_group">
    <div>
      <label for="name">Your Name:</label>
      <input id="ins_name" type="text" name="name"  maxlength="40" />       
    </div>

    <a class="next-tab mover" rel="2" href="#">Next Step »</a>
</div>

一旦通过 onfocusout 事件验证，输入将被赋予“有效”或“错误”类

我已经尝试了很多方法来尝试在单击下一个选项卡按钮时找出当前选项卡是否具有类“错误”的输入，但无法弄清楚。

这是我最近的尝试。

 $('.next-tab, .prev-tab').click(function() {
    if ($(this).find('input.error')) {
               alert('error present');
               return false;
    }

    $tabs.tabs('select', $(this).attr("rel"));
       return false;
 });

任何人都可以帮助我判断一个 div 是否有包含该错误的输入。我的问题之一是 $this 正在使用 .next-tab 元素。我试图选择最接近的“form_group”类也没有运气。

Answer 1

如果您发布脚本当前的不良行为（例如，即使出现错误，它也会更改选项卡/即使字段有效，它也不会更改选项卡）会有所帮助。

无论如何，我相信你想要这样的东西：

$('.next-tab, .prev-tab').click(function(e) {

  if ($('.form_group input.error').length > 0) {
    alert('error present');
    e.preventDefault();
  }

请注意，.preventDefault() 通常优于 return false，以防止事件的默认行为：

http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/