Jquery 验证将所有错误放在带有 li 元素的单个 div 中

Question

我想在带有li元素的单个div下显示所有验证错误。

以下是我的代码

$("#login_form").validate({
        showErrors: function (errorMap, errorList) {
            $("#error_list").html('');
            this.defaultShowErrors();
            if (!this.numberOfInvalids()) {
                $(".error_container").hide();
            }
        },
        rules: {
            username: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            username: {
                required: "Please enter username."
            },
            password: {
                required: "Please enter password."
            }
        },
        errorElement : 'li',
        errorLabelContainer: '#error_list',
        highlight: function(element) {
            $(".error_container").show();
        }
    });

目录 ：

<div class="error_container" {{count($errors) ? '' : 'hidden'}}>
  <div class="error_wrapper">
    <ul id="error_list">
      @if(count($errors))
        @foreach($errors->all() as $error)
         <li class="error">{{$error}}</li>
        @endforeach
      @endif
    </ul>
  </div>
</div>

它工作正常，但错误隐藏和显示无法正常工作。

我只想简单地将提交功能后获得的所有验证错误放在单个div中。

Answer 1

我已经通过更新以下代码解决了错误

  showErrors: function (errorMap, errorList) {
                   //$("#error_list").html('');       // Removed from here
                    this.defaultShowErrors();
                    if (!this.numberOfInvalids()) {
                        $(".error_container").hide();
                        $("#error_list").html('');     // Placed here
                    }
                },