使用 Jquery Validation 插件进行验证不起作用答案

【问题标题】：Validation not working using Jquery Validation plugin使用 Jquery Validation 插件进行验证不起作用
【发布时间】：2018-07-08 13:02:18
【问题描述】：

我正在使用 jquery 验证插件进行表单验证，并且表单位于模态框内，但它不起作用。它适用于模态吗？或者我的代码可能有问题？

这是我的 javascript：

$(document).ready(function(){
    // validate the comment form when it is submitted
    // $("#gen_form").validate();

// validate signup form on keyup and submit
    $("#gen_form").validate({

        rules: {
      'fname' : {
             letters: true,
            maxlength: 10,
            minlength:2
        },
        'lname' : {
             letters: true,
            maxlength: 10,
            minlength:2
        },
        'email': {
            email: true

        },
        messages: {
            fname: {
                maxlength: "Your last name must not consist more than 40 characters"
                 minlength: "Your last name must consist of at least 2 characters"

            },
             lname: {
                maxlength: "Your last name must not consist more than 40 characters"
                 minlength: "Your last name must consist of at least 2 characters"

            },
            email: "Please enter a valid email address"

        }
        });
});

这是我的 html 表单（我已经为错误标签添加了一个 css）：

<script src="{{asset('js/jquery-2.0.0.min.js')}}" type="text/javascript">
</script>
<script src="{{asset('js/form-validation.js')}}" type="text/javascript">
</script>
<script src="{{asset('js/jquery.validate.min.js')}}" type="text/javascript">
</script>

<form method="post" action="{{route('profile.update', ['id'=> Auth::id()])}}" enctype="multipart/form-data" id="gen_form">
                {{csrf_field()}} 
                <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;<b>General Information</b></h4>

          <div class="col-sm-6">
            <div class="form-group label-floating has-success">
                <label class="control-label">Last Name</label>
                <input type="text" class="form-control" id="lname" name="lname" value="{{$user->lname}}" />
                <br>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group label-floating has-success">
                <label class="control-label">First Name</label>
                <input type="text" class="form-control" id="fname" name="fname" value="{{$user->fname}}" />
                <p class="validations">Hello</p>
            </div>
          </div>
          <div class="col-sm-12">
            <div class="form-group label-floating has-success">
              <label class="control-label">Location</label>
              <input type="text" class="form-control" name="location" value="{{$user->location}}" />
           </div>
         </div>
          <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;<b>Contact Information</b></h4>
         <div class="col-sm-6">
           <div class="form-group label-floating has-success">
              <label class="control-label">Contact Number</label>
              <input type="text" class="form-control" id="contact_no" name="contact_no" value="{{$user->contact_no}}" />
                <p class="validations">Hello</p>
           </div>
         </div>
        <div class="col-sm-6">
          <div class="form-group label-floating has-success">
              <label class="control-label">Email</label>
              <input type="email" class="form-control" id="email" name="email" value="{{$user->email}}" />
                <p class="validations">Hello</p>
          </div>
        </div>

这里有人知道发生了什么吗？

【问题讨论】：

“它不工作”... 你得到一个错误，脚本没有运行吗？我们需要更多信息为什么它不起作用
哦，我没有收到任何错误。
在页面加载后尝试检查您的控制台。你没有看到任何错误吗？

标签： javascript jquery html laravel validation

【解决方案1】：

您的脚本无效。

不妨试试

$(document).ready(function(){
    // validate the comment form when it is submitted
    // $("#gen_form").validate();

// validate signup form on keyup and submit
    $("#gen_form").validate({

        rules: {
            'fname' : {
                    letters: true,
                    maxlength: 10,
                    minlength:2
                },
                'lname' : {
                    letters: true,
                    maxlength: 10,
                    minlength:2
                },
                'email': {
                    email: true

                },
                messages: {
                    fname: {
                        maxlength: "Your last name must not consist more than 40 characters",
                        minlength: "Your last name must consist of at least 2 characters"

                    },
                    lname: {
                        maxlength: "Your last name must not consist more than 40 characters",
                        minlength: "Your last name must consist of at least 2 characters"

                    },
                    email: "Please enter a valid email address"

                }
            }
        });
});

看看你有没有更好的运气？

【讨论】：

【解决方案2】：

我想，你有一些语法错误。尝试做这样的事情：

$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();

// validate signup form on keyup and submit
$("#gen_form").validate({

  rules: {
    'fname' : {
         letters: true,
        maxlength: 10,
        minlength:2
    },
    'lname' : {
         letters: true,
        maxlength: 10,
        minlength:2
    },
    'email': {
        email: true
    },

  },

  messages: {
      fname: {
          maxlength: "Your last name must not consist more than 40 characters",
           minlength: "Your last name must consist of at least 2 characters"

      },
       lname: {
          maxlength: "Your last name must not consist more than 40 characters",
           minlength: "Your last name must consist of at least 2 characters"

      },
      email: "Please enter a valid email address"

    }

});

});

【讨论】：

【解决方案3】：

您在rules 部分的末尾缺少一个右大括号和一个逗号，就在messages: 之前

 [...]
   'email': {
        email: true
    },
  }, /* <--- This one */
  messages: {
        fname: {
 [...]

【讨论】：