jquery验证不适用于cakephp中的表单

时间:2016-11-16 05:36:48

标签: jquery cakephp

在此先感谢,我是cakephp的新手。我正在使用cakephp 2.8.5版本。实际上我已经下载了jquery.validate.min.js文件来验证我的添加用户表单,即add.ctp文件。在这个文件中我使用了

<?php echo $this->Html->script('jquery'); ?>
<?php echo $this->Html->script('jquery.validate.min'); ?>  

包含库文件。在add.ctp文件中,jquery验证代码无效,即使我从谷歌获得了一个引用,我必须使用双引号作为用户名文本框字段,如"data[User][username]"而不是data[User][username]。但在我的表单中,我必须使用data[User][username]作为用户名字段。我写了一个验证码,但我没有收到任何错误。请任何人帮我如何做到这一点。出于检查目的,我已经为最多电话文本框字段编写了验证码。

我的adduser.ctp文件如下。

<!DOCTYPE html>
    <html lang="en">
    <head>              

        <?php echo $this->Html->css('sb-admin-2'); ?>
        <?php echo $this->Html->css('sb-admin-2.min'); ?>
        <?php echo $this->Html->script('sb-admin-2'); ?>
        <?php echo $this->Html->script('sb-admin-2.min'); ?>

        <?php echo $this->Html->css('jquery-ui.min');?>
        <?php echo $this->Html->script('jquery');?>
        <?php echo $this->Html->script('jquery.validate.min');?>     
        <?php echo $this->Html->script('jquery-ui.min');?>    

        <?php echo $this->Html->css('bootstrap.min');?>
        <?php echo $this->Html->script('bootstrap');?>
        <?php echo $this->Html->script('bootstrap.min'); ?>      

        <style type="text/css">   

        </style> 
        <script>
          $(function() {

        // Setup form validation on the #register-form element 
        $("#UserAddForm").validate({ 

            // Specify the validation rules
            rules: {
                "data[User][username]": "required",
                "data[User][password]": {
                    required: true
                    minlength: 5
                },            
                "data[User][full_name]": "required",
                "data[User][email]": {
                    required: true,
                    email: true
                },
                "data[User][phone]": "required",  
                //'role': "required"             

            },

            // Specify the validation error messages 
            messages: {
                "data[User][username]": "Please enter the Username",
                "data[User][full_name]": "Please enter your Full Name",  
                "data[User][password]": {
                    required: "Please provide a password",
                    minlength: "Your password must be atleast 5 characters long"
                }, 
                "data[User][email]": "Please enter a valid email address"  

            },

            submitHandler: function(form) {
                form.submit();
            }       


        });

      });  

        </script>        
    </head>
    <body>

    <div id="wrapper">

      <div>
                <div class="row">
                    <div class="col-lg-12">
                        <h3 class="page-header">Add User</h3> 
                    </div>
                    <!-- /.col-lg-12 --> 
                </div>
                <!-- /.row -->
                <div class="row">
                    <div class="col-lg-8">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                               <!-- Form Name -->
                               Enter User Details
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <form role="form" name="add_userform" role="form" accept-charset="utf-8" enctype="multipart/form-data" method="post" id="UserAddForm" action="/invl_exams/users/add"> 
                                            <div class="form-group">
                                                <label>Username</label>  
                                                <input type="text" class="form-control" id="UserUsername" maxlength="255" name="data[User][username]">   
                                                <!--<p class="help-block">Example block-level help text here.</p> --> 
                                                <label id="UserUsername-error" class="error" for="UserUsername"></label> 
                                            </div>
                                            <div class="form-group"> 
                                                <label>Password:</label>                                    
                                                <input type="password" class="form-control" required="required" id="UserPassword" name="data[User][password]">
                                                <label id="UserPassword-error" class="error" for="UserPassword"></label>
                                            </div>
                                            <div class="form-group">
                                                <label>Full Name</label>
                                                <input type="text" class="form-control" required="required" id="UserFullName" maxlength="255" name="data[User][full_name]">
                                                <label id="UserFullName-error" class="error" for="UserFullName"></label>
                                            </div>

                                            <div class="form-group">
                                                <label>Email</label>
                                                <input type="email" class="form-control" required="required" id="UserEmail" maxlength="255" name="data[User][email]">
                                                <label id="UserEmail-error" class="error" for="UserEmail"></label>
                                            </div>

                                            <div class="form-group">
                                                <label>Secondary Email</label>                             
                                                <input type="email" class="form-control" required="required" id="UserSecEmail" maxlength="255" name="data[User][secondary_email]">
                                                <label id="UserSecEmail-error" class="error" for="UserSecEmail"></label>
                                            </div>

                                             <div class="form-group">
                                                <label>Phone</label>                             
                                                <input type="text" class="form-control" required="required" id="UserPhone" maxlength="255" name="data[User][phone]">
                                                <label id="UserPhone-error" class="error" for="UserPhone"></label>
                                              </div>
                                              <div class="form-group">
                                                <label>Secondary Phone</label>  
                                                <input type="text" class="form-control" required="required" id="UserSecPhone" maxlength="255" name="data[User][secondary_phone]">
                                                <label id="UserSecPhone-error" class="error" for="UserSecPhone"></label>
                                              </div>
                                              <div class="form-group">
                                                <label>Location</label>  
                                                <input type="text" class="form-control" required="required" id="UserSecLoc" maxlength="255" name="data[User][location]">
                                                <label id="UserLocation-error" class="error" for="UserLocation"></label>
                                              </div>

                                              <div class="form-group">
                                                  <label>Business Name</label>  
                                                  <input type="text" class="form-control" required="required" id="UserBusinessName" maxlength="255" name="data[User][business_name]">
                                                  <label id="UserBusiness-error" class="error" for="UserBusinessName"></label>
                                              </div>

                                              <div class="form-group">
                                               <label for="UserDocument">Document</label>     
                                                <select class="form-control" required="required" id="UserDoc" name="data[User][document]">
                                                 <option value="">-- Select --</option>
                                                  <option value="Passport">Passport</option>
                                                  <option value="License Certificate">License Certificate</option> 
                                                  <option value="Aggrement Copy">Aggrement Copy</option>
                                                </select>
                                                <label id="ExamName-error" class="error" for="UserDocument"> </label>
                                              </div>
                                              <!--<div class="form-group">
                                                <label>File input</label>
                                                <input type="file">
                                              </div> -->

                                              <div class="form-group" id="ShowDoc" style="display:none">
                                                <label>File</label> 
                                                <!--<input name="data[Document][docfile]" id="DocumentSubmittedfile" type="file"> -->
                                                <!--<input type="file" name="data[User][docfile]" id="usersFile"/>-->
                                                <?php //echo $this->Form->input('doc_file',array( 'type' => 'file','error' => false,'placeholder'=>'Upload Image')); ?> 
                                                <?php echo $this->Form->file('Document.submittedfile');  ?> 
                                              </div>
                                              <div class="col-lg-12">
                                                 <h4 class="page-header">Point of Contact</h4> 
                                              </div>
                                              <div class="form-group">
                                                  <label>Name</label>    
                                                  <input type="text" class="form-control" required="required" id="pname" maxlength="255" name="data[User][pname]">
                                                  <label id="UserPName-error" class="error" for="UserPName"></label>
                                              </div>
                                              <div class="form-group">
                                                  <label>Email</label>                                      
                                                  <input type="text" class="form-control" required="required" id="pemail" maxlength="255" name="data[User][pemail]">
                                                  <label id="UserPEmail-error" class="error" for="UserPEmail"></label>
                                              </div>

                                              <div class="form-group">
                                                  <label>Phone</label>  
                                                  <input type="text" class="form-control" required="required" id="pPhone" maxlength="255" name="data[User][pOfc_phone]">
                                                  <label id="UserpPhone-error" class="error" for="UserPEmail"></label>
                                              </div>
                                              <div class="form-group"> 
                                                  <label>Designation</label>  
                                                  <input type="text" class="form-control" required="required" id="pDesign" maxlength="255" name="data[User][pdesignation]"> 
                                                  <label id="UserpPhone-error" class="error" for="UserpDesign"></label>
                                              </div>

                                              <div class="form-group">
                                                <button type="submit" class="btn btn-default">NEXT</button> 
                                              </div>

                                        </form>
                                    </div>
                                    <!-- /.col-lg-6 (nested) -->

                                    <!-- /.col-lg-6 (nested) -->
                                </div>
                                <!-- /.row (nested) -->
                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->
            </div>
               <!-- /.Page wrapper -->
          </div>
              <!-- /.Wrapper -->

    </body>
    </html>

1 个答案:

答案 0 :(得分:1)

你需要一个逗号

"data[User][password]": {
                    required: true,
                    minlength: 5
                }, 

演示:https://jsfiddle.net/k8z2xqfh/