Question

在我的项目中，我使用jquery动态生成html表单。这里的页面包含五个选项卡，每个选项卡都有单独的上一个和下一个该选项卡使用bootstrap设计。任何人都可以建议最简单的方法来验证此页面。即，当我单击第一个选项卡上的下一个按钮时，它应仅在第一个选项卡中验证字段，依此类推。请帮我解决这个问题。非常感谢提前。

以下是我的全部代码：

html代码：

SELECT 
  temp.transactionId, 
  temp.amount, 
  temp.transactionType 
FROM 
  (
   (SELECT 
      sale.transaction_id AS transactionId, 
      sale.amount AS amount, 
      'SALE' AS transactionType,
      id,
      1
    FROM 
     t_sales sale
    WHERE 
      sale.merchant_id = '1' 
   )

   UNION ALL

   (SELECT 
      refund.refund_transaction_id AS transactionId, 
      refund.amount AS amount, 
      'REFUND' AS transactionType,
      sale_id as id,
      2
   FROM 
      t_refunds refund  
   WHERE 
      refund.merchant_id = '1' 
   )
   ORDER BY 4,5
) 
AS temp

JS：

<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);
                }
            }
        }
    });
});

这里我们需要在js中添加上面的代码，并且需要指定表单的id。此验证在静态页面中正常工作，但无法验证动态生成的表单。

Answer 1

为了简单起见，我们假设你有一些像下面这样的标记：

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

因此，您可以在下一步按钮上收听click事件：

$('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

问题： 这看起来很混乱，这就是你目前的结构。

<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>

和你的剧本

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

由于您将form作为包含标签内容的父级，因此在任何给定的标签页上，您最终都会验证整个表单。

<强>解决方案：

1）为每个标签创建一个单独的表单，单击下一个按钮，您只能验证相应标签的表单。所以你的Html应该以这种方式重组。

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

当两个表单都有效时，您可以组合两个表单的数据，然后使用Jquery提交。

2）如果您不想重新构建HTML，则必须手动仅抓取该特定标签内容div中的元素，然后手动验证它们。

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

2 个答案: