Question

我正在使用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>

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

Answer 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"

                }
            }
        });
});

看看你运气好吗？

Answer 2

我认为，您有一些语法错误。尝试做这样的事情：

< table of extent 0 >

Answer 3

rules

之前，messages:部分末尾缺少结束花括号和逗号

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

验证无法使用Jquery Validation插件

3 个答案: