如何触发使用 Parsley.js 动态创建的元素的验证？

Question

我有一个 jQuery UI 对话框，其中包含一些我正在尝试使用 Parsley.sj 验证的内容，但我一定做错了，因为输入没有得到验证。这就是我正在做的验证表单：

$(function() {
  $('#create_quote_dialog').dialog({
    autoOpen: false,
    title: 'Options',
    modal: true,
    resizable: false,
    width: 1000,
    height: 600,
    buttons: [{
      text: 'Cancel',
      click: function() {
        $(this).dialog('close')
      },
    }, {
      text: 'Continue',
      click: function() {
          $('#ctq_frm').parsley();
      }
    }]
  })

  $('#create_quote').click(function(ev) {
    var create_quote_dialog = $('#create_quote_dialog');
    create_quote_dialog.show().dialog('open');
  });
});

我在这里缺少什么？我做了一个小jsFiddle 来玩。

Answer 1

在这个片段中：

click: function() {
   $('#ctq_frm').parsley();
}

您忘记提交表单：

click: function () {
    $('#ctq_frm').parsley();
    $('#ctq_frm').submit();
}

jQuery UI 按钮有类型按钮，而不是提交。这就是问题所在。

$('#create_quote_dialog').dialog({
    autoOpen: false,
    title: 'Options',
    modal: true,
    resizable: false,
    width: 1000,
    height: 600,
    buttons: [{
        text: 'Cancel',
        click: function () {
            $(this).dialog('close')
        },
    }, {
        text: 'Continue',
        click: function () {
            $('#ctq_frm').parsley();
            $('#ctq_frm').submit();
        }
    }]
})
$('#create_quote').click(function (ev) {
    var create_quote_dialog = $('#create_quote_dialog');
    create_quote_dialog.show().dialog('open');
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.7.2/parsley.min.js"></script>


<div id="create_quote_dialog" style="display: none;">
  <form name="ctq_frm" id="ctq_frm" novalidate="">
    <table class="table" id="customer_to_quote">
      <thead>
        <tr>
          <th>Parent</th>
          <th>Customer</th>
          <th>Agreement ID</th>
          <th>Agreement Type</th>
          <th>CF Program Level</th>
          <th>distributor.id</th>
          <th>Start Date</th>
          <th>end.date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" class="parent_checkbox" value="30" name="parent" data-parsley-multiple="parent">
          </td>
          <td>
            <input type="hidden" name="customerSiteId" value="30"> Etheridge Electric Inc.
          </td>
          <td>
            <input type="hidden" name="agreementId" value="0"> 0
          </td>
          <td>
            <select name="agreementType" class="form-control" required="">
              <option value="">-- Please select one --</option>
              <option value="1">Percentage Support</option>
              <option value="2">Consignment Support</option>
              <option value="7">Mobile Solutions</option>
              <option value="9">SmartGlance Subscription</option>
              <option value="10">Customer FIRST Lite</option>
              <option value="11">Solution Support - LPS</option>
              <option value="12">InSight Subscription</option>
            </select>
          </td>
          <td>
            <select name="cfProgramLevel" class="form-control" required="">
              <option value="">-- Please select one --</option>
              <option value="1">Primary</option>
              <option value="2">Standard</option>
              <option value="3">Premium</option>
              <option value="4">Elite</option>
            </select>
          </td>
          <td>
            <input type="hidden" name="distributorId" value="16"> 16
          </td>
          <td>
            <input type="text" class="start_date form-control" name="StartDate" required style="width: 100px;">
          </td>
          <td>
            <input type="text" class="end_date form-control" name="EndDate" required style="width: 100px;">
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" class="parent_checkbox" value="31" name="parent" data-parsley-multiple="parent">
          </td>
          <td>
            <input type="hidden" name="customerSiteId" value="31"> United States Gypsum
          </td>
          <td>
            <input type="hidden" name="agreementId" value="32415"> 32415
          </td>
          <td>
            <input type="hidden" name="agreementType" value="1"> Percentage Support
          </td>
          <td>
            <input type="hidden" name="cfProgramLevel" value="2"> Standard
          </td>
          <td>
            <input type="hidden" name="distributorId" value="28"> 28
          </td>
          <td>
            <input type="hidden" name="startDate" value="01/01/2017"> 01/01/2017
          </td>
          <td>
            <input type="hidden" name="endDate" value="12/31/2017"> 12/31/2017
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

<button type="button" id="create_quote">Create Quote</button>