不带表单标签的不显眼验证答案

【问题标题】：Unobtrusive validation without a form tag不带表单标签的不显眼验证
【发布时间】：2014-06-02 10:18:39
【问题描述】：

我有一个提交给网络服务的表单（通过标准 AJAX，没有标签。我正在使用 jQuery 非侵入式验证插件来验证此“表单”中的字段，但我无法获得验证运行。

        <div id="form-contact">
            <div class="form-group">
                <label for="txtName">Your Name</label>
                <input class="form-control" id="txtName" placeholder="Enter name" name="txtName" type="text" data-val="true" data-val-required="Your name field is required." />
                <span class="field-validation-valid" data-valmsg-for="txtName" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group">
                <label for="txtEmail">Email</label>
                <input class="form-control" id="txtEmail" placeholder="Enter email" name="txtEmail" type="text" data-val="true" data-val-regex="Please enter a valid email address." data-val-regex-pattern="[a-z0-9!#$%&amp;&#39;*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&amp;&#39;*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" data-val-required="Please enter your email address." type="text" />
                <span class="field-validation-valid" data-valmsg-for="txtEmail" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group">
                <label for="txtPhone">Phone</label>
                <input type="text" class="form-control" id="txtPhone" placeholder="Enter phone number" name="txtPhone" type="text" data-val="true" data-val-required="Your phone number is required." >
                <span class="field-validation-valid" data-valmsg-for="txtPhone" data-valmsg-replace="true"></span>
            </div>

            <a id="btnSubmit" href="#">Contact us</a>
        </div>

如果我手动调用$('#txtName').validate()，则会显示我的错误消息，但我想做类似$('#form-contact').validate() 的操作并调用验证。这可能吗？

【问题讨论】：

您可以输入但不要添加任何输入类型的提交并以编程方式触发提交
如果要验证表单，为什么不使用表单？

标签： jquery asp.net jquery-validate unobtrusive-validation

【解决方案1】：

引用 OP：

“我想做类似$('#form-contact').validate() 之类的事情，并且还要调用验证。这可能吗？”

这是不可能的。您的 #form-contact 元素是 div 并且它必须是 form。

Unobtrusive Validation 插件依赖于 jQuery Validate 插件。您绝对不能使用 jQuery Validate 插件来验证来自输入元素的数据，这些输入元素不包含在一组 <form></form> 标签中......这正是插件的设计方式。

【讨论】：