How to check the result of the pattern validation for a text input in Javascript?

Question

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(); 
    }
}

You ask 3 different questions in your title and throughout your post - which are you really asking? — vol7ron
– vol7ron, Commented Aug 28, 2016 at 16:21

Álvaro · Accepted Answer · 2016-08-28 16:26:59Z

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(); 
    }
}

edited Aug 28, 2016 at 16:26

answered Aug 28, 2016 at 16:12

Álvaro

2,06918 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rgthree Over a year ago

Do note that validity, as well as the implicit pattern, does not inherently work on older browsers and may not be considered fully compatible with a global audience.

Levi Cole Over a year ago

The jQuery condition here wont work, instead you should use $("#foo").prop('validity')?.valid

rgthree · Accepted Answer · 2016-08-28 18:07:18Z

1

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(); 
  }
}

edited Aug 28, 2016 at 18:07

answered Aug 28, 2016 at 17:25

rgthree

7,28319 silver badges21 bronze badges

2 Comments

gornvix Over a year ago

Thanks for the explanation. Your code this.getAttribute does not work, so I used $("#foo").attr("pattern") instead. Other than that I would tick your answer.

rgthree Over a year ago

@tyebillion Oh yeah, forgot we were using jQuery. Fixed the answer!

Rafi Ud Daula Refat · Accepted Answer · 2016-08-28 16:09:22Z

1

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

answered Aug 28, 2016 at 16:09

Rafi Ud Daula Refat

2,25520 silver badges28 bronze badges

1 Comment

gornvix Over a year ago

No, I only want to check when the user leaves the input.

Gatsbill · Accepted Answer · 2016-08-28 16:24:19Z

1

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.net/t6wLeqq0/1/

answered Aug 28, 2016 at 16:24

Gatsbill

1,7901 gold badge12 silver badges25 bronze badges

8 Comments

gornvix Over a year ago

Your fiddle doesn't always work, for example try an input x-

Gatsbill Over a year ago

yeah that's because the pattern you provide match as soon as one character is a number or a letter, you can try it on regex101.com

gornvix Over a year ago

Well that is not an acceptable solution as I want the same functionality as offered by the pattern attribute. I used test instead on the regex and it worked fine, see my update section above!

Gatsbill Over a year ago

yeah I can understand, you should look at Alvaro's answer

gornvix Over a year ago

When I Google "jquery validity" all I get are links about a plug in of that name. It seems ridiculous to use a plug in for the sake of two lines of code, at least in my case.

|

Collectives™ on Stack Overflow

How to check the result of the pattern validation for a text input in Javascript?

4 Answers 4

2 Comments

2 Comments

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related