html input pattern with 2 patterns

Question

Is it possible to have a input pattern with 2 options?

For example. I have a field where a user enters an extension number (4 Digits) eg. 7483 BUT Some people have 2 extensions eg. 7483 / 7542

Is there a way to set the input pattern so it can either be 4 characters or 11? And otherwise show a error message?

This is what I have so far:

Extension:<br><input type="text" name="extension" required
pattern= "{4}" title="Please Enter the Extension Number/s"><br />

Ur welcome. There is a very useful open source library for form validation named [jQuery Form Validator](http://www.formvalidator.net/). Make sure to check it & read thorough. For your special case you need to [write custom validator](http://www.formvalidator.net/#custom-validators). — behkod, Feb 23 '17 at 14:51
Nice Fast Try! But thats wrong. Try a bit more. If you couldn't find design the right pattern, I'll send it to you. But Its better to read & think more Dude! — behkod, Feb 23 '17 at 14:54
I checked that list but it doesnt show the option for 2 patterns? Mind helping me out? Also please post it as an answer so i can mark it correct :D — RedZ, Feb 23 '17 at 14:55

behkod · Accepted Answer · 2017-02-23T15:43:43.203

1

You can use jQuery Form Validator lib & write custom validator for it. For validation you should use /^\d{4}( \/ \d{4})?$/ pattern.

Here is the complete solution. Read it thorough & stick with RegExp! ;-)

<!DOCTYPE html>
<html>
<head>
    <title>Custom Validation</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <form action="" method="post">
        Extension:<br />
        <input type="text" name="extension" required
               data-validation="custom" data-validation-regexp="^\d{4}( \/ \d{4})?$" title="Please Enter the Extension Number/s"><br />
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
    <script>
        // Setup form validation
        $.validate();
    </script>
</body>

edited Feb 23 '17 at 15:43

answered Feb 23 '17 at 15:14

behkod

2,647
2
18
33

2

You don't need jQuery or a plugin for this. Just enter the regex `^\d{4}( \/ \d{4})?$` into the `pattern` attribute and HTML5 takes care of the validation. – Heretic Monkey Feb 23 '17 at 15:21
TY. My goal was to introduce the mentioned lib. It has many useful features for validation. – behkod Feb 23 '17 at 15:24
1

Well, in that case, there's actually a [regex validator built in](http://www.formvalidator.net/#default-validators_custom) :). – Heretic Monkey Feb 23 '17 at 15:30
@MikeMcCaughan Answer Updated Dude! – behkod Feb 23 '17 at 15:44
Thank you you guys are rock stars :D – RedZ Feb 24 '17 at 05:39

score 1 · Answer 2 · answered Mar 20 '18 at 18:23

1

You can try the following.

<input type="text" name="extension" required pattern=".{4}|.{11}" title="Please Enter the Extension Number/s">

https://jsfiddle.net/37ohqswp/

answered Mar 20 '18 at 18:23

Brian Zhang

421
4
4

score 0 · Answer 3 · answered Feb 23 '17 at 16:54

I think the best approach is to use regex match, keypress event listener and replace. Please see below for suggested answer. In addition, I have put the code on https://jsfiddle.net/8p590mhq/ for test. Hope this helps.

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ext</title>
 </head>
 <body>
   <div>
     Extension:<br>
     <input type="text" id="extension" name="extension" placeholder="Please enter phone ext's" required>
   </div>
   <!-- JavaScript file include -->
   <script type="text/javascript" src="js.js"></script>
 </body>
</html>

JS

//ammend field function
let ammend_field = () => {
 //get element by id
 let ext = document.getElementById("extension");

 //use regex match to replace ext.value input field
 //original answer from:
 //http://stackoverflow.com/questions/17260238/how-to-insert-space-every-4-characters-for-iban-registering
 ext.value = ext.value.replace(/[^\d0-9]/g, '').replace(/(.{4})/g, '$1 / ').trim();
}

//add event listener to submit button
document.getElementById("extension").addEventListener("keypress", ammend_field);

html input pattern with 2 patterns

3 Answers3