0

我正在尝试使用jquery 表单验证器来验证具有多个输入字段和强制文件上传的表单。为简洁起见,我在示例中减少了 1 个文本输入字段和 1 个文件上传字段。问题是每次选择要上传的文件时,其他字段的验证将不起作用。

< script >
  $.validate({
    form: '#frmSlide',
    modules: 'file',
    validateOnBlur: false,
    errorMessagePosition: 'top', // Instead of 'element' which is default
    scrollToTopOnError: false, // Set this property to true if you have a long form
    onError: function($form) {
      alert('Failed!');
    },
    onSuccess: function($form) {
      alert('ok!');
      return false; // Will stop the submission of the form
    },
    onElementValidate: function(valid, $el, $form, errorMess) {
      console.log('Input ' + $el.attr('name') + ' is ' + (valid ? 'VALID' : 'NOT VALID'));
    }
  });

$("#imgfile").on('change', function() {
  var imgPath = $(this)[0].value;
  var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
    if (typeof(FileReader) != "undefined") {
      var image_holder = $("#image-holder");
      image_holder.empty();
      var reader = new FileReader();
      reader.onload = function(e) {
        $("<img />", {
          "src": e.target.result,
          "class": "thumb-image img-thumbnail"
        }).appendTo(image_holder);
      }
      image_holder.show();
      reader.readAsDataURL($(this)[0].files[0]);
    } else {
      alert("This browser does not support FileReader.");
    }
  } else {
    alert("Pls select only images");
  }
}); < /script>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
   
  <title></title>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Aguafina+Script">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="css/theme.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link rel="stylesheet" href="css/ie10-viewport-bug-workaround.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" />
  <link rel="stylesheet" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/theme-default.min.css" />
  <link rel="stylesheet" href="css/typeaheadjs.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/jquery.form-validator.min.js"></script>
</head>
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSlide">

        <div class="form-group">
          <label class="col-sm-4 control-label" for="imgfile">Image file</label>
          <div class="col-sm-8">
            <input type="file" id="imgfile" data-validation="required ratio mime size" data-validation-allowing="jpg, png, gif" />
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-8 col-md-offset-4" id="image-holder">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label" for="seq">Sequence</label>
          <div class="col-sm-8">
            <input class="form-control server" name="f_seq" id="f_seq" data-validation="number" data-validation-allowing="range[1;4]" type="text" value="" placeholder="Enter 1-4" />
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-4 col-sm-8">
            <button name="btnUpd" id="btnUpd" type="submit" class="clsUpd btn btn-primary"><i class="fa fa-floppy-o"></i>&nbsp;Update</button>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

</html>

谁能告诉我如何解决它?谢谢。

4

1 回答 1

1

只需将比率验证更改为 data-validation-ratio="1:1" (或您想要的任何比率),而不是数据验证中的“比率”。在这里工作小提琴 - https://jsfiddle.net/Sanjeevi/s9o7273r/

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSlide">
<div class="form-group">
          <label class="col-sm-4 control-label" for="seq">Sequence</label>
          <div class="col-sm-8">
            <input class="form-control server" name="f_seq" id="f_seq" data-validation="number" data-validation-allowing="range[1;4]" type="text" value="" placeholder="Enter 1-4" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label" for="imgfile">Image file</label>
          <div class="col-sm-8">
            <input type="file" id="imgfile" data-validation="required mime size" data-validation-allowing="jpg, png, gif" data-validation-ratio="1:1"/>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-8 col-md-offset-4" id="image-holder">
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-4 col-sm-8">
            <button name="btnUpd" id="btnUpd" type="submit" class="clsUpd btn btn-primary"><i class="fa fa-floppy-o"></i>&nbsp;Update</button>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>
于 2016-05-11T03:11:05.730 回答