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?

Answer 1

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>