如何使用jquery使用引导程序表单验证来验证嵌套选项卡中的控件?

时间:2013-07-03 08:16:41

标签: validation twitter-bootstrap

我正在使用引导选项卡n创建嵌套选项卡,如何使用引导程序验证来验证控件,因为它甚至不在非嵌套选项卡中工作:

    <div class="tabbable"> 
<!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#PersonelInfo" data-toggle="tab">Personel</a></li>
    <li><a href="#CompanyInfo" data-toggle="tab">Company</a></li>
    <li><a href="#AcademicsInfo" data-toggle="tab">Academics</a></li>
    <li><a href="#WorkExperienceInfo" data-toggle="tab">Work Experience</a></li>
  </ul>
<div class="tab-content" style="border:thin #DDDDDD solid">

<div class="tab-pane fade in active" id="PersonelInfo">

<!-- Start Of side Tabs for Personel -->

    <div class="tabbable tabs-left">
    <br />
    <ul id="subtabs" class="nav nav-tabs">
            <li class="active"><a class="tchild"  id ="A1" href="#BasicInfo" data-toggle="tab">Basic</a></li>
            <li><a class="tchild" id="A2" href="#ContactInfo" data-toggle="tab">Contact</a></li>
            <li><a class="tchild"  id ="A5" href="#DependentsInfo " data-toggle="tab">Dependents</a></li>
            <li><a class="tchild"  id ="A4" href="#DisplayInfo " data-toggle="tab">Display</a></li>
            <li><a class="tchild"  id ="A3" href="#LoginInfo " data-toggle="tab">Login</a></li>
        </ul>
    <div id="subtabcontent" class="tab-content">

            <div class="tab-pane fade in active" id="BasicInfo">  
           <%-- <br />
            <span class="theadgs">Personel Details</span>
            <br />--%>
            <br />      
              <div class="controls-row">
                     <div class="control-group span3">
                     <label class="control-label">First Name &nbsp;&nbsp;<span class="late">*</span></label>
                     <div class="controls">
                     <input type="text" id="txtFirstName" name ="FirstName" class="input-large" data-column="FirstName" />
                     </div>
                     </div>

                     <div class="control-group span3">
                     <label class="control-label">Last Name&nbsp;&nbsp;<span class="late">*</span></label>
                     <div class="controls">
                     <input type="text" id="txtLastName" name ="LastName" class="input-large" data-column="LastName" />
                     </div>
                     </div>

                     <div class="control-group span3">
                      <label class="control-label">Middle Name&nbsp;&nbsp;<span class="late">*</span></label>
                     <div class="controls">
                     <input type="text" id="Text1" name ="MiddleName" class="input-large" data-column="MiddleName" />
                     </div>
                     </div>         
              </div>
              <div class="controls-row">
                     <div class="control-group span3">
                     <label class="control-label">Father Name&nbsp;&nbsp;<span class="late">*</span></label>
                     <div class="controls">
                     <input type="text" id="txtFatherName" name ="FatherName" class="input-large" data-column="FatherName" />
                     </div>
                     </div>

                     <div class="control-group span3">
                     <label class="control-label">Religion</label>
                     <div class="controls">
                     <input type="text" id="txtReligion" name ="Religion" class="input-large" data-column="Religion" />
                     </div>
                     </div>
                     <div class="control-group span3">
                     <label class="control-label">CNIC</label>
                     <div class="controls">
                     <input type="text" id="txtCNIC" name ="CNIC" class="input-large" data-column="CNIC" />
                     </div>
                     </div>         
              </div>
              <div class="controls-row">  
                     <div class="control-group span3">
                     <label class="control-label">Date Of Birth</label>
                     <div class="controls">
                     <div class="input-append date datepicker datepicker-basic" data-date="<%= today.ToString("MM/dd/yyyy") %>" data-date-format="mm-dd-yyyy">
                     <input id="dtDateOfBirth"  name ="DateOfBirth" data-column="DateOfBirth" size="12" type="text" value="12-02-2012"/><span class="add-on"><i class="icon-calendar"></i></span>
                     </div>
                     </div>
                     </div>
                     <div class="control-group span3">
                     <label class="control-label">Marital Status</label>
                     <div class="controls">
                     <select id="ddlMaritalStatus" tabindex="1"  data-placeholder="Select here.." class="span4" name="MaritalStatus"  data-column="MaritalStatus">
                     </select>

                     <%--<asp:DropDownList ID="ddlMaritalStatus"  runat="server" data-placeholder="Select here.." class="input-large" data-column="MaritalStatus" name="MaritalStatus" ClientIDMode="Static">
                     </asp:DropDownList>--%>

                     </div>
                     </div>   

                     <div class="control-group span3">
                      <label class="control-label">Gender</label>
                     <div class="controls">
                     <label class="radio inline"><input type="radio" name="optionsRadios" id="rbtnMale" value="Gender" class="radiocheck" checked="checked"/>Male</label>
                     <label class="radio inline"><input type="radio" name="optionsRadios" id="rbtFemale" value="Gender" class="radiocheck"/>Female</label>
                     </div>
                     </div>      

              </div>
              <div class="controls-row">
                     <div class="control-group span3">
                     <label class="control-label">Blood Group</label>
                     <div class="controls">
                     <input type="text" id="txtBloodGroup" name ="BloodGroup" class="input-large" data-column="BloodGroup" />
                     </div>
                     </div>

                     <div class="control-group span3">
                     <label class="control-label">Language</label>
                     <div class="controls">
                     <input type="text" id="txtLanduage" name ="FatherName" class="input-large" data-column="FatherName" />
                     </div>
                     </div>     
              </div>
              <div class="controls-row">
              <div class="control-group span3">
                     <label class="control-label">Skills</label>
                     <div class="controls">
                     <textarea id="txtSkills" class="input-xlarge" style="" rows="5" data-column="Skills" name="Skills"></textarea>
                     </div>
                     </div>  
                     </div>
            </div> </div>
                     </div>  
                     </div>

验证代码         / ------------表单验证------------ /

    $('#form1').validate({
        errorClass: "help-inline",
        errorElement: "span",
        rules: {
            PortalName: {
                required: true,
            },
            PortalDesc: {
                required: true
            }
        },
        messages: {
            PortalName: {
                required: "Specify Name for portal"
            },
            PortalDesc: {
                required: "test validation"
            }
        },
        highlight: function (label) {
            $(label).closest('.control-group').addClass('error').removeClass('success');
        },
        success: function (label) {
            $(label).text('').closest('.control-group').addClass('success');
        }
    });
});

2 个答案:

答案 0 :(得分:0)

AFAIK使用jquery验证,然后在客户端验证后端的另一个验证。仅使用twitterbootstrap进行设计。

答案 1 :(得分:0)

“验证代码”中的“PortalName”和“PortalDesc”是要验证的元素的ID。

你应该用你的替换它们。