I have a text input with a custom oninvalid message:

<input id="foo" type="text" maxlength="16" required pattern="[a-zA-Z0-9]+"
oninvalid="this.setCustomValidity('Please enter letters and / 
or numbers only.')" onBlur="chk()" autofocus>

In the onBlur event I want to run some code, but only if the text entered passed the pattern validation specified. Something like:

function chk() {
    if (document.getElementById("foo").isvalid?()) {
        bar(); 
    }
}

Alternatively:

function chk() {
    if ($("#foo").isvalid?()) {
        bar(); 
    }
}

Update

I found the following solution, but it does repeat the code of the pattern validation:

function chk() {
    var exp = /^[a-zA-Z0-9]+$/;
    if (exp.test($("#foo").val())) {
        bar(); 
    }
}

I have a text input with a custom oninvalid message:

<input id="foo" type="text" maxlength="16" required pattern="[a-zA-Z0-9]+"
oninvalid="this.setCustomValidity('Please enter letters and / 
or numbers only.')" onBlur="chk()" autofocus>

In the onBlur event I want to run some code, but only if the text entered passed the pattern validation specified. Something like:

function chk() {
    if (document.getElementById("foo").isvalid?()) {
        bar(); 
    }
}

Alternatively:

function chk() {
    if ($("#foo").isvalid?()) {
        bar(); 
    }
}

Update

I found the following solution, but it does repeat the code of the pattern validation:

function chk() {
    var exp = /^[a-zA-Z0-9]+$/;
    if (exp.test($("#foo").val())) {
        bar(); 
    }
}

• javascript
• jquery
• html

• Usually i always use onChange event. – Ying Yi Commented Aug 28, 2016 at 16:08
• You ask 3 different questions in your title and throughout your post - which are you really asking? – vol7ron Commented Aug 28, 2016 at 16:21
• OK, I updated my question. – gornvix Commented Aug 28, 2016 at 17:00

4 Answers 4

You don't need to recheck if the text matches the regular expression manually. You can just check the ValidityState.

function chk() {
    if ($("#foo").validity.valid) {
        bar(); 
    }
}

You can grab the pattern from your input but we need to modify it slightly. As MDN explains: "the pattern pattern must match the entire value, not just some subset." This basically boils down to the browser implicitly prepending a ^ and appending a $ to the pattern value. So, for our case, when we grab that string pattern value from our input, we also need to do the same to match the browser's functionality:

function chk() {
  var pattern = $("#foo").attr('pattern');
  var exp = new RegExp('^' + pattern + '$');
  if (exp.test($("#foo").val())) {
    bar(); 
  }
}

you can check onChange event and call that method everytime an input is changed

first of all you want to create a regex with the pattern attribute you set in your input :

function chk() {

     var pattern = this.getAttribute('pattern');
     var regex = new RegExp(pattern);

     // ...  
} 

and then verify if the input value match the regex :

function chk() {

     var pattern = this.getAttribute('pattern');
     var regex = new RegExp(pattern);

     // regex matching
     if (regex.test(this.value)) {
       bar();
     }

}

see this fiddle: https://jsfiddle/t6wLeqq0/1/