个人中心
gpt4 book ai didi

javascript - 输入类型=文件验证停止其他输入类型验证

转载 作者：行者123 更新时间：2023-12-03 06:58:45 25 4
gpt4 key购买 nike

我正在尝试使用 jquery form validator验证具有多个输入字段和强制文件上传的表单。为简洁起见，我在示例中减少了 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>

谁能告诉我如何修复它？谢谢。

最佳答案

只需将数据验证中的比率验证更改为 data-validation-ratio="1:1"(或任何您想要的比率)而不是“比率”。在这里工作 fiddle - 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>

关于javascript - 输入类型=文件验证停止其他输入类型验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37151776/

25 4 0
文章推荐： javascript - 需要确认我对 Servlet 与 RESTful 网页差异的理解
文章推荐： c++ - 试图画吃 bean 人
文章推荐： c++ - 选择正确的内核大小以进行中值模糊处理以减少噪声
文章推荐： javascript - 元素不会添加到 Javascript 数组中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com