时间戳

首页 > 解决方案 > 如何对具有特定类的所有标签应用验证？

jquery - 如何对具有特定类的所有标签应用验证？

问题描述

我有一个循环表格。所有表格字段必须至少填写一次。对于字段，我添加了一个类。接下来，我检查是否有值。

我的形式（laravel 刀片）

@foreach($locales as $locale)
<div>
    <label for="{{$locale.'[title]'}}">Title</label>
        <input class="valid" name={{$locale.'[title]'}} 
               type="text"
               id="{{$locale.'[title]'}}">

   <label for="{{$locale.'[text]'}}" class="control-label">Text </label>
       <textarea class="valid"
                 name="{{$locale.'[text]'}}"
                 id="{{$locale.'[text]'}}">
       </textarea>
</div>
@endforeach

jQuery

$(document).ready(function () {
            $('form').on('submit', function (event) {
                validForm();
            });

            function validForm() {
                $('.valid').each(function () {
                    if ($(this).val()) {
                       $result = true;
                       return false;
                    } else {
                        $result = false;
                    }
                });
                if (!($result)) {
                    event.preventDefault();
                    alert('error');
                }
            }
        });

在这部分代码if ($(this).val()) {$result = true;return false;}中，例如，如果 input 有一个值，则循环退出并且不检查 textarea。但是如果我删除return false，那么所有表单的所有字段都需要填写（循环将绘制它们多少次）。

如何检查至少一个表单的所有字段是否都有值？或者如何正确地跳出循环？现在表单有2个字段，但是以后可能会更多，也就是校验应该是通用的。

标签： jqueryvalidation

解决方案

您可以像这样向父 div 添加一个类：

@foreach($locales as $locale)
<div class="part-form">
  <label for="{{$locale.'[title]'}}">Title</label>
    <input class="valid" name={{$locale.'[title]'}} 
           type="text"
           id="{{$locale.'[title]'}}">

  <label for="{{$locale.'[text]'}}" class="control-label">Text </label>
   <textarea class="valid"
             name="{{$locale.'[text]'}}"
             id="{{$locale.'[text]'}}">
   </textarea>
</div>
@endforeach

然后检查是否有任何part-form已满。

基于您的代码的示例：

$(document).ready(function () {
        $('form').on('submit', function (event) {
            validForm();
        });

        function validForm() {
            $(".part-form").each(function() {
              var empty = $(this).find(".valid").filter(function() {
                return $(this).val().trim() == "";
              });
              if (!empty.length) {
                $result = true;
                return false;
              }
            })
            if (!($result)) {
                event.preventDefault();
                alert('error');
            }
        }
    });

推荐阅读