我的页面中有表单验证功能,但无法正常运行

时间:2019-11-08 04:52:47

标签: javascript php jquery html codeigniter

我的图像首先有3个场input for image title select for yearinput type file。但是我想在按update按钮的同时检查是否插入图像标题。我正在使用表单验证,但无法正常工作。

我的代码:

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
  <div class="content-wrapper">
    <section class="content-header">
      <h1><u>Heading </u></h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> Home Content</a></li>
        <li class="active"> Topic </li>
      </ol>
    </section>
     <section class="content">    
      <div class="row">
       <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
        <h3 class="page-header"></h3>
      </div> 
     <div class="col-lg-offset-1 col-md-12 col-sm-12 col-xs-12 col-lg-10">

     <div class="col-md-12">
      <div class="box box-primary">
        <div class="box box-default">
                      <div class="box-header with-border">
                        <h3 class="box-title">Add Gallary Images</h3>
                        <div class="box-tools pull-right">
                          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                          <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
                        </div>
                      </div>
          <!-- /.box-header -->
          <div class="box-body">
            <form id="add_gallary_form" method="post">

                     <div class="form-group">
                       <label>Image Title</label>
                       <input type="text" class="form-control" name="img_title" id="img_title" placeholder="Enter your Image Title" dir="" autocomplete="off" required>
                     </div>
                     <div class="form-group">
                       <label>Year</label>
                        <select class="form-control" name="year" id="year" required>
                          <?php
                          foreach(range(1950, (int)date("Y")) as $year) {
                              echo "\t<option value='".$year."'>".$year."</option>\n\r";
                          }
                          ?>
                          </select>
                     </div>

                     <div class="form-group">
                       <label>Image</label>
                         <input type="file" id="upload_image" name="upload_image" class="col-md-8 form-control"  multiple />
                         <div class="form-group">
                          <div class="col-md-12" id="uploaded_images" ></div>
                      </div>
                     </div>

                    <div class="box-footer">
                          <button type="submit" id="btn-insert" class="btn btn-success col-lg-8 col-md-offset-2">Insert</button>
                    </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
  </section>
  <script src="<?php echo base_url();?>assets/admin/assets/jquery/jquery-3.2.1.min.js"></script>
  <script src="<?php echo base_url();?>assets/admin/bootstrap/js/bootstrap.min.js"></script>
  <script src="<?php echo base_url();?>assets/admin/plugins/fastclick/fastclick.js"></script>
  <script src="<?php echo base_url();?>assets/admin/dist/js/app.min.js"></script>
  <script src="<?php echo base_url();?>assets/admin/plugins/slimScroll/jquery.slimscroll.min.js"></script>
  <script src="<?php echo base_url();?>assets/admin/dist/js/demo.js"></script>
  <script type="text/javascript" src="<?php echo base_url(); ?>assets/admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>

   <script>
 $("#add_gallary_form").validate({
  rules:{
    "img_title":{
  required: true,
  },

  },
messages:{
  "img_title":{
  required: "Please Enter Image Title",
  },
},
});
   </script>
  <script type="text/javascript">
      $("#btn-insert").click(function(e){
                e.preventDefault();
                var img_title = $('#img_title').val();
                var year = $('#year').val();
                if ( $('#upload_image').val() =='') {
                    alert("Please Select Image File");
                }else{
                      var files = $('#upload_image')[0].files;
                      var error = '';
                      var formData=new FormData();
                      formData.append('img_title',img_title);
                      formData.append('year',year);

                      for (var count = 0; count <files.length; count++) {
                           var name = files[count].name;
                           var extension = name.split('.').pop().toLowerCase();
                        if (jQuery.inArray(extension,['gif','png','jpg','jpeg'])== -1) {
                            error += "Invalid " + count +" Image File " 
                        }else{
                          formData.append("files[]",files[count]);
                        }
                      }
                      if (error=='') {
                            $.ajax({
                                   url: "<?php echo base_url();?>admin_controllers/WebsiteContentController/insertImage",
                                    type: "POST",
                                    data: formData,
                                    contentType:false,
                                    cache:false,    
                                    processData:false,
                                    beforeSend: function(){
    $('#uploaded_images').html("<div style='margin: auto; text-align: center;'><img src='<?php echo base_url();?>/assets/images/uploads/loader.gif'><label class='text-success' align='center'>Uploading...</label></div>");
                                    },
                                    success: function(data)
                                    {
                                      $('#uploaded_images').html(data);
                                      alert('Image successfully added')
                                     setTimeout(function(){location.reload();},1000);          
                                    }
                                  });
                        }else{
                          alert(error);
                        }
                } 
           });
  </script>

我的数据直接插入而无需检查表单验证。 我不知道自己在代码中哪里写错了。 如何验证我的图片标题。

3 个答案:

答案 0 :(得分:2)

在此var img_title = $('#img_title').val();下方添加以下代码

if(img_title=="")
{
  alert("Enter Image title");
  return false;
}

您可以在btn-send按钮单击事件中进行验证。

答案 1 :(得分:1)

使用此代码,将检查 img_title 变量(不为null和为空),也检查未定义。

我希望它对您有用

 if(img_title)
    {
      alert("Enter Image title");
      return false;
    }

答案 2 :(得分:1)

点击“提交”按钮即可尝试使用

<script type="text/javascript">
        $(function () {
            $("#btn-insert").click(function () {
            var img = $('#img_title').val();
             if(img == ""){
                alert("Enter the image name");
                return false;
             }
            return true;});
        });
    </script>