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 Unobtrusive验证。只是纯粹的jQuery Validate插件。请注意，默认的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验证不起作用

1 个答案: