如何验证多选项卡中的输入框

时间:2012-04-04 16:20:36

标签: javascript jquery jquery-validate

我正在使用jquery validate和jquery tabs来创建多标签表格

假设一个简单的形式:

  

标签1表示输入地址,标签2表示输入名称,标签3表示提交

HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#home">address</a></li>
  <li><a href="#profile">name</a></li>
  <li><a href="#submit">submit</a></li>
</ul>

 <form id="selectList" method="post" action="finish.php">
<div class="tab-content">
  <div class="tab-pane active" id="home">//input box address</div>
  <div class="tab-pane" id="profile">//input box name</div>
  <div class="tab-pane" id="messages">//submit button</div>
</div>
 </form>

js validate

  $("#selectList").validate( {
      rules: {
         "selectList[]": {
              required: true,
              minlength: 1
          }
       }
   })

});

问题是:

  1. 正如您所看到的,虽然所有选项卡都在表单内,但是,如果提交按钮位于选项卡3中,则无法验证选项卡1,2中的输入框,我如何具体确定验证规则?不同的标签?
  2. 谢谢

    更新

    $("#optionalform").validate({
        ignore:''
    });
    

    使用这个独立可以帮助做到这一点,问题是,我无法设置规则,并且数据选择器插件和其他功能在选项卡中不起作用,它可能会跳过我的所有元素?

    $(document).ready(function(){
    
    $('.tabbable').tabs();
    $("#selectList").validate({
        ignore:''
    
            rules: {
             "selectList[]": {
                  required: true,
                  minlength: 1
              }
           }
       })
              $('#dd').datebox({  
        required:true  
    });
    
    
    
    });
    
    
    $(function(){
      $("#closeTab").click(function() {
                 window.parent.$('#tt').tabs('close','Add Campaign'); 
                 location.reload();     
      });
    });
    

1 个答案:

答案 0 :(得分:1)

每次更改标签时都需要调用验证。

$('.selector').tabs({
    select: function(event, ui) { ... } //run validation here?
});