HTML JS拦截表单错误提交

最新推荐文章于 2022-08-17 17:21:50 发布

huang_ftpjh

最新推荐文章于 2022-08-17 17:21:50 发布

阅读量910

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/huang_ftpjh/article/details/98638435

form 表单每次提交前都要验证内容有无填写还有填写的正确与否

这些可以用Ajax提交代替 form表单提交，但是有些提交可能必须是 form 表单提交 （根据已有经验，勿喷！）

更新 -- ajax实现文件上传 -- https://blog.youkuaiyun.com/Inuyasha1121/article/details/51915742

比如说文件上传

enctype="multipart/form-data" 文件上传必须加

表单提交按钮那里 type="button" οnclick="return CheckPost();" 再写一个检查的 js 方法

<form  id="addForm"  method="post" name="addForm" action="/addchip.do" enctype="multipart/form-data"  >
    <input type="hidden" name="exist" id="exist" value="0"/><%--默认没上传为0--%>
    <select id="brand" class="list-select">
              <option value="">请选择</option>
              <c:forEach items="${brandselect}" var="item">
              <option value="${item.brandName}">${item.brandName}</option> 
              </c:forEach>
     </select>
    
   <input type="file" name="uploadDriver" class="ipt"  id="uploadDriver" accept=".bin,.hex" contenteditable="true" style="display: none;" /> 
   <input type="text" id="textup1" class="text-upload" readonly/>
   <input type="button" id="btnup1" class="btn-upload" alt="" value="上传"/>
    
   <input class="bginput" type="button" name="dosubmit" id="chipbtn" value="确定"  onclick="return CheckPost();" >

#addForm  为表单的name属性

function CheckPost() {
var brandText = document.getElementById("brandText").value;
var uploadDriver = document.getElementById("uploadDriver").value;
if (uploadDriver != ""){
    document.getElementById("exist").value = 1;
  }
if (brandText == ""){
    alert("请填写品牌名！");
    addForm.brand.focus();
    return false;
  }
if (uploadData == ""){
    alert("请上传数据文件！");
    addForm.series.focus();
     return false;
}

addForm.submit();  //重点  没有返回false  就提交了
}

为了兼容火狐浏览器（火狐浏览器无法点击上传文件按钮）
   $('#btnup1').click(function(event) {
        $('#uploadDriver').click();
    });

    //capture selected filename
    $('#uploadDriver').change(function(click) {
        $('#textup1').val(this.value);
    });

按回车键提交
jQuery(document).bind('keyup', function(e) {
     if (event.keyCode == 13) {
         jQuery("#chipbtn").click();//点击登录
      }
    });

本来我用 required  
<input type="file" name="uploadDriver" accept=".bin,.hex" style="display: none;" required /> 
来检查提交前是否有上传文件

An invalid form control with name='uploadDriver' is not focusable

表单元素隐藏时，无法用 required