Want html pattern attribute work without hitting a submit button

Question

I am working on validation and put a html pattern attribute and want to see the error message without hitting a save/submit button. When I click outside the field then it should be validate with my pattern condition.

Here is my code:

<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>

What will be the JQuery or JavaScript?

JoshG · Answer 1 · 2019-03-14T07:47:09.720

Here's one approach that works for me on Chrome:

Create a hidden submit button.
Listen for the focusout event on the input field.
Trigger click on the hidden submit button.

This should trigger HTML5 validation whenever the field loses focus (clicking outside of the field or tabbing out of it).

Snippet:

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>

Note: If you don't require the browser-based validation alert (i.e., you'd rather show your own alert dialog or some other message notifying the user that validation failed), then you could just use the checkValidity() method on the input element.

but i don't want to hit any button. when i clicked on screen or outside that field then it will be validate on that condition. — Aditya, Mar 14 '19 at 08:56
@Aditya You don't have to hit any button. It's simulated. Click "Run code snippet", enter some data in the field, then click out of it to see what I mean. — JoshG, Mar 14 '19 at 08:57

score 0 · Answer 2 · answered Mar 14 '19 at 07:30

0

Based on this answer. You can manualy trigger submit with javascript and preventDefault on change event of input tho.

answered Mar 14 '19 at 07:30

Pavel Kratochvil

452
2
9

score 0 · Accepted Answer · answered Mar 14 '19 at 07:42

You can validate on blur the regex. Do some things if bad string given

$("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>

Want html pattern attribute work without hitting a submit button

3 Answers3