如何在jquery中验证包含引导选项卡的动态生成表单

Question

In my project i'm dynamically generating an html form using jquery. Here the page consist of five tabs each having separate previous and next buttons. The tab is designed using bootstrap. Can anyone please suggest the easiest method to validate this page. ie, when i click next button on first tab it should validate fields in first tab only and so on. Please help me to solve this issue. Many thanks in advance.

Here is my whole code:

html code:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#name" id="id-name">name</a></li>
    <li><a data-toggle="tab" href="#address" id="id-address">address</a></li>
</ul>

 <form class="form-horizontal" id="id-fn-employee" method="POST"  enctype="multipart/form-data" action="${pageContext.request.contextPath}/employee/saveMe">
    <div class="tab-content">
        <div id="name" class="tab-pane fade in active" style="height:auto;overflow: hidden;">
        <span id ="name1"></span>
           <div class="form-group">
                <label class="col-sm-3 control-label">First Name<a style="color: red">*</a>
                    <p style="font-size: 75%;" class="help-block">First Name</p>
                </label>
                <div class="col-xs-4">
                    <input type="text" placeholder="First Name" required="true" id="id-firstNmae" name="firstNmae" class="form-control">
                    <p style="font-size: 75%;" class="help-block"></p>
                </div>
           </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">Last Name<a style="color: red">*</a>
                    <p style="font-size: 75%;" class="help-block">Last Name</p>
                </label>
                <div class="col-xs-4">
                    <input type="text" placeholder="Last Name" required="true" id="id-lastName" name="lastName" class="form-control">
                    <p style="font-size: 75%;" class="help-block"></p>
                </div>
           </div>
           <ul class="pager">
                <li><a href="javascript:void(0);" id="id-cancel">Cancel</a></li>
                <li><a href="javascript:showTab('address');" id="id-name-next">Next</a></li>
            </ul>
        </div>
        <div id="address" class="tab-pane fade" style="height:auto;overflow: hidden;">
        <span id ="address1"></span>
            <div class="form-group">
                <label class="col-sm-3 control-label">house name<a style="color: red">*</a>
                    <p style="font-size: 75%;" class="help-block">house name</p>
                </label>
                <div class="col-xs-4">
                    <input type="text" placeholder="house name" required="true" id="id-houseName" name="houseName" class="form-control">
                    <p style="font-size: 75%;" class="help-block"></p>
                </div>
           </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">Street<a style="color: red">*</a>
                    <p style="font-size: 75%;" class="help-block">Street</p>
                </label>
                <div class="col-xs-4">
                    <input type="text" placeholder="Street" required="true" id="id-street" name="street" class="form-control">
                    <p style="font-size: 75%;" class="help-block"></p>
                </div>
           </div>
            <ul class="pager">
                <li><a href="javascript:showPrevTab('name');" id="id-address-prev">Previous</a></li>
                <li><a href="javascript:showTab('age');" id="id-age-next">Next</a></li>
            </ul>
        </div>
    </div>
</form>

JS:

$(document).ready(function(){
      var $validator = $("#id-fn-employee").validate({
        errorPlacement: function (error, element) {
            var placement = $(element).data('error');
            if( $(element).hasClass('grp') ){
                error.insertAfter($(element).parent());
            }else{
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            }
        }
    });
});

I have included the required js files along with

<script src="${pageContext.request.contextPath}/resources/js/plugins/jquery.validate.min.js"></script>

Here we need to add the above code in js and need to specify the id of the form. This validation is working fine in static pages but failed to validate dynamically generated form.

Answer 1

Let's assume you have some markup like the following for simplicity:

<ul class="tabs">
   <li class="tab" id="first_tab">
       <form>
          /* form fields are here */
          <button class="next_btn">Next</button>
       </form>
   </li>
</ul>

So you can listen to the click event on the Next button:

$('form .next_btn').on('click', function () {
    var $btn = $(this),
        $form = $btn.closest('form');

    initValidator($form);

    if($form.valid()){
       // Go to next step
    } else {
       alert('Invalid form')
    }
});


function initValidator($form) {
    var $validator = $form.validate({
        errorPlacement: function (error, element) {
            var placement = $(element).data('error');
            if( $(element).hasClass('grp') ){
                error.insertAfter($(element).parent());
            }else{
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            }
        }
    });
}

Answer 2

Problem : This looks messy, Being this your current structure.

<form class="form-horizontal" id="id-fn-employee" method="POST"  enctype="multipart/form-data" action="${pageContext.request.contextPath}/employee/saveMe">
  <div class="tab-content">
    <div id="name">...</div>
    <div id="address">...</div>
  </div>
</form>

And your script

var $validator = $("#id-fn-employee").validate({...

Since your have the form as a parent which wraps both the tab content, at any given tab you will end up in validating the entire form.

---

Solution:

1) Have a seperate forms for each tab, and on click of next button you can validate only that respective tab's form. So your Html should be restructured this way.

  <div class="tab-content">
    <div id="name"><form>...</form></div>
    <div id="address"><form>...</form></div>
  </div>

And when both forms are valid you can combine the data of both the forms and then submit using Jquery.

2) If you dont want to restructure your HTML then you have to manually grab only the elements in that particular tab content div and then validate them manually.