希望 html 模式属性在不点击提交按钮的情况下工作

Question

我正在进行验证并放置了一个 html 模式属性，我想在不点击 save/submit 按钮的情况下查看错误消息。当我在字段外单击时，它应该根据我的模式条件进行验证。

这是我的代码：

<div class="col-md-2">
<div class="form-group">
<label>Extra Credit Days<span class="text-danger">*</span></label>
<input class="form-control" type="text" id="txt_credit_days" name="" 
pattern="(?=.*\d)(?=.*[WQYDM])(?=.*[WQYDM]).{1,3}"title="Enter in specified 
format">
</div> </div>

JQuery 或 JavaScript 是什么？

Answer 1

基于此answer。您可以使用 javascript 手动触发提交，并在输入的更改事件上防止默认。

Answer 2

这是我在 Chrome 上适用的一种方法：

创建一个隐藏的提交按钮。
监听 input 字段上的 focusout 事件。
在隐藏的提交按钮上触发 click。

只要字段失去焦点（在字段外单击或跳出字段），这应该会触发 HTML5 验证。

片段：

let input = document.getElementById("txt_credit_days");
let inputButton = document.getElementById("inputButton");

input.addEventListener("focusout", function() {
  inputButton.click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
  <div class="form-group">
    <label>Extra Credit Days<span class="text-danger">*</span></label>
    <form id="form">
      <input class="form-control" type="text" id="txt_credit_days" name="" pattern="(?=.*\d)(?=.*[WQYDM])(?=.*[WQYDM]).{1,3}" title="Enter in specified 
format">
      <input type="submit" class="hide" id="inputButton" style="visibility:hidden;">
    </form>
  </div>
</div>

注意：如果您不需要基于浏览器的验证警报（即，您宁愿显示自己的警报对话框或通知用户验证失败的其他消息），那么您可以使用 checkValidity() 输入元素上的方法。

Answer 3

您可以验证模糊正则表达式。如果给定错误字符串

，请执行一些操作

$("input[pattern]").blur(function(){
  var elem = $(this);
  
  var pattern = new RegExp(elem.attr("pattern"));
  if (pattern.test(elem.val())) {
     alert('okay');
  } else {
    alert('bad');
     //disable form submit
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-md-2">
<div class="form-group">
<label>Extra Credit Days<span class="text-danger">*</span></label>
<input class="form-control" type="text" id="txt_credit_days" name="" 
pattern="(?=.*\d)(?=.*[WQYDM])(?=.*[WQYDM]).{1,3}"title="Enter in specified 
format">
</div> </div>

希望 html 模式属性在不点击提交按钮的情况下工作

Want html pattern attribute work without hitting a submit button

html

javascript

jquery

button

submit-button