jQuery 验证具有大量表单的复杂页面，尤其是不在表单中的元素

Posted 2023-05-09

【中文标题】jQuery 验证具有大量表单的复杂页面，尤其是不在表单中的元素

【英文标题】：jQuery Validate complex page with lots of forms, and especially elements not in a form

【发布时间】：2015-09-28 11:17:03

【问题描述】：

我想验证不在表单中的页面输入。我知道jquery.validate 对表单内的输入有很强的依赖性，但我有一个用 MVC 编写的单页 ​​APP，其中包含很多 AJAX 部分、大量选择和动态更新各种其他输入的输入。

<div id="form">
    <!-- lots of other fieldgroups with code like this -->
   <div class="fieldGroup">
      <label>Manufacturer</label>
      <form action="/quotes/?orgname=OptionsLtd&amp;accountid=%7BD174E073-685E-E311-84AE-12D0D8A96A66%7D" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#ModelsList" data-ajax-url="/Partials/ModelsSelect" id="form1" method="post">                    <input type="hidden" name="actuality" class="selected-actuality-value" value="1">
       <input type="hidden" name="vehicleType" class="selected-vehicletype-value" value="1">

      </form>
   </div>

<!-- Other selects and inputs outside partial forms that are required, but do not submit any ajax on change -->
 <select id="importantAndRequired" required="required"><options></select>

<!-- some more AJAX forms -->

</div>

然后我有一个保存按钮。不是提交，只是一个绑定到 jquery click 的按钮。 我根据我需要的输入名称创建了一个非常复杂的 JSON 对象，它创建了一个“ViewModel”，它代表一个包含整个复杂类、列表和数组的 C# 类。我将 JSON 提交到 MVC WebAPI，API 按预期解析 JSON，并且我的所有值都在服务器上处理。

那么，在构建 JSON 对象之前，我究竟如何验证需要选择的输入，例如下拉菜单、复选框？

jQuery validate 期望所有输入都在一个表单中，但不能将我的 <div id="form" 更改为 <form id=form 因为整个 div 包含许多使用 <form> 的 AJAX 表单，并且大部分输入不需要AJAX 表单中的验证，只是分散在页面周围的其他输入。

【参考方案1】：

找到，并使用了 javascript 有效性的构建。检查我从中构建 JSON 对象的所有输入，并在每个输入旁边放置一条验证消息，如果不满足则会显示。当然，不像 jQuery 验证那样可定制，但这不是必需的。此外，无论如何添加自定义验证也很容易。

function validate(inputs)
    $('.validationMessage').hide();

    var allValid = true;
    $(inputs).each(function (idx, el) 
        if (!el.validity.valid) 
            allValid = false;
            $(el).next('.validationMessage').show();
        
    );

    return allValid;