动态形式的引导程序和 jQuery 验证不起作用答案

【问题标题】：Bootstrap and jQuery Validation in dynamic form not working动态形式的引导程序和 jQuery 验证不起作用
【发布时间】：2015-04-20 23:48:57
【问题描述】：

我有一个使用 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 Unobtrusive 验证。只是纯粹的 jQuery Validate 插件。刚刚注意到，默认的 HTML 扩展生成的标记类似于我在上面添加的标记，带有 data-val-* 和 data-msg-* 等属性。我已经注意到 jQuery Validation 搜索 data-rule-* 和 data-msg-*。这可能是我遇到问题的原因之一？

【问题讨论】：

在浏览器中调出开发者工具（通常是 F12），看看你的 jQuery 是否失败。
已经做到了。没有失败。
请创建一个更完整的演示。否则，到目前为止，您向我们展示的内容似乎没有任何问题。为什么问题标记为c#？这和 JavaScript 有什么关系？
You can also put debug: true inside the .validate() method 看看它是否通过控制台日志告诉你任何有用的信息。
感谢您的提示。我已经更新了问题，添加了更多细节。 C# 存在是因为这是一个 ASP.NET MVC 应用程序。但是没有来自调试选项的信息

标签： c# twitter-bootstrap-3 jquery-validate bootstrap-modal

【解决方案1】：

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

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

<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="" />

【讨论】：