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 />
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>
^\d{4}( \/ \d{4})?$ into the pattern attribute and HTML5 takes care of the validation.
You can try the following.
<input type="text" name="extension" required pattern=".{4}|.{11}" title="Please Enter the Extension Number/s">
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);
