Bootstrap 和 jQuery 动态形式的验证不起作用

Question

我有一个页面是使用 bootstrap CSS 创建的，上面有一个像这样的按钮。

<div class="col-sm-4 m-b-xs">
    <a data-title="New customer" class="btn btn-primary btn-outline btn-sm modalLink" href="/Registry/CustomerCreatePartial">
        <i class="fa fa-plus"></i>&nbsp;&nbsp;Add customer
    </a>
</div>

当用户单击按钮 jQuery 处理程序时，处理程序会依次调用另一个 javascript 函数

(function ($) {
    $('a.modalLink').on('click', function (event) {
        event.preventDefault();
        var url = $(this).attr('href');
        var title = $(this).attr('data-title');
        CreateModalDialog(url, title, 'Cancel', 'Save');
    });
})(jQuery);

代码如下：

function CreateModalDialog(url, title, cancelText, submitText) {
    var modal = $('#myModal');
    modal.on('show.bs.modal', function (event) {
        var theModal = $(this);

        // Get the form from the server.
        $.get(url, function (data) {
            //Add the form to the modal body 
            theModal.find('.modal-body').html(data);
        });

        //wire up form validation
        theModal.find('form').validate();

        //set up form submission
        var okButton = theModal.find('.modal-footer button.buttonSave');
        okButton.on('click', function (event) {
            //submit the form
            theModal.find('form').submit();
        });
    });

    // wire up the actual modal functionality and show the dialog
    modal.modal({                    
        "backdrop": "static",
        "keyboard": true,
        "show": true
    });
}

不幸的是，验证没有发生，表单被提交。

我在表单上的控件使用 data-val-* 属性验证，如下例所示。

<input type="text" value="" name="Zip" id="Zip" 
       data-val-required="Field required" 
       data-val-length-min="5" data-val-length-max="5" 
       data-val-length="Zip field should be 5 characters long"
       data-val="true" class="form-control">

我哪里错了？

编辑：

我根本没有使用 jQuery 不显眼的验证。只是纯粹的 jQuery 验证插件。请注意，默认的 HTML 扩展生成的标记与我在上面添加的标记一样，具有 data-val-* 和 data-msg-* 等属性。我已经注意到 jQuery 验证搜索 data-rule-* 和 data-msg-*。这可能是我遇到问题的原因吗？

Answer 1

我最终使用了可用的 jQuery.Validation.Unobtrusive.Native 包 here。

这个包非常好，通过使用它，我已经能够生成与 jQuery 验证完美配合的不显眼的验证代码，因为生成的标记更标准，如

<input data-msg-number="The field TextBox must be a number." 
                data-msg-required="The TextBox field is required." 
                data-rule-number="true" 
                data-rule-required="true" 
                id="TextBox" name="TextBox" type="text" value="" />

Bootstrap 和 jQuery 动态形式的验证不起作用

Bootstrap and jQuery Validation in dynamic form not working

c#

jquery-validate

bootstrap-modal

twitter-bootstrap-3