Auto-format Driver's License using Javascript? - javascript

I have an input box entering US Driver's License number. However, I want it to restrict to this format (A1234567) when typing.
I have searched for this but I can only find RegEx.
<input id="id">
<script>
</script>
Expected to have an auto formatted input box for Driver's License number.
(format: A1234567)
Thank you very much for your help.

Modern browsers have form validation functionality built into them. They can check a regex pattern for you. Minimally, all you have to do is set the pattern attribute.
Let's first work out the expression you need. I assume from your format:
The first character is always a capital A.
There will be 7 digits after that, 0 through 9.
For that, we use the following regex:
A[0-9]{7}
Basically, this just requires a literal A, followed by 7 characters in the set 0-9.
Now to use that in HTML:
<input type="text" name="license" pattern="A[0-9]{7}">
The browser will show some generic error for input not matching. We can do better than that though. That's where the Constraint Validation API comes in. First, wrap that input in a <form> element:
<form>
<input type="text" name="license" pattern="A[0-9]{7}">
</form>
Now, let's add some JavaScript code check the validity every time there is input (effectively when a character is entered, or content is pasted):
const licenseEl = document.querySelector('input[name="license"]');
licenseEl.addEventListener('input', (e) => {
e.target.setCustomValidity(''); // Clear any previous failed invalid messages
e.target.checkValidity();
});
Finally, add our custom message if the input is invalid:
licenseEl.addEventListener('invalid', (e) => {
e.target.setCustomValidity('Enter a valid license number.');
});
You end up with something like this:
As a bonus, you're automatically compatible with screen readers, alternative input devices, future interfaces, etc.
Here's a JSFiddle so you can play around with it yourself: https://jsfiddle.net/k7g2bj9L/1/
For older browsers, you may want a polyfill. And of course, always validate your input server-side. The browser can be entirely bypassed.

Related

Regex Behaves Differently on HTML Pattern than on an Express Backend

I have the following regex pattern on an HTML input field, which is supposed to hold an email address:
<input type="text" pattern="^\w+([.-]?\w+)*#\w+([.-]?\w+)*(\.\w{2,4})+$" /><br>
I furthermore have the same regex on an Express (JavaScript) backend using the following:
var re-email = new RegExp("^\w+([.-]?\w+)*#\w+([.-]?\w+)*(\.\w{2,4})+$")
if (!re-email.test(email)) {
validation = false
}
Although the regex are exactly the same, a specific test input is evaluated as true on the front-end while as false on the backend.
Why is this?
Solution (found after the initial post):
Instead of using "new RegExp" (which is not working) as above, include the Regex within forward slashes as below (which works).
var re-email = /^\w+([.-]?\w+)#\w+([.-]?\w+)(.\w{2,4})+$/
Probably not the answer you are after (not vue.js specific)...
Email address input validation should usually be completed like so:
<input type="email" name="" value="" required />
Specifying the correct "type" to an input field also adjusts input keyboards on mobile devices to make inputting an email address easier.
Your regular expression is poorly written and leads to "catastrophic backtracking" as well as not actually supporting valid email addresses.
Email address validation is generally complex, see this answer and associated question:
https://stackoverflow.com/a/201378/406712
You can also find the HTML email address validation equivalent regular expression in the HTML spec:
https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address
Also note you failed to escape the characters in the string, the first instance being the \w which without escaping the \ will appear as simply w.
Escaped the string it more like this:
'/^\\w+([.-]?\\w+)#\\w+([.-]?\\w+)(.\\w{2,4})+$/'

Regex not recognizing input value for vehicle license plate

I'm having a problem with my regex validation code. I'm trying to figure out how can I validate a vehicle license plate number. The code that I wrote is listed below this message. This is written down in React inline code and I've written down two different regex expressions and both of the come out to be false. The license plate number should be in this format XX-NNNN-XX.
X = Letter
N = Number
const [licencePlate, setLicencePlate] = useState('');
var ValidateLicencePlate = /^[A-Z][A-Z]-[0-9][0-9][0-9][0-9]-[A-Z][A-Z]$/g ;
var regex = /^[A-Z]{2}-[0-9]{4}-[A-Z]{2}$/g ;
<input name="licence-plate" type="text" className="feedback-input" maxLength='10' onChange={(e) => setLicencePlate(e.target.value.toUpperCase())} placeholder="XX-NNNN-XX"/>
This regex can solve the problem.
let regex = /^[A-Z]{2}-\d{4}-[A-Z]{2}/gi
This regex will match two alphabet at the beginning, four digits at the middle and two alphabet at the end.
You can use regex as following
<input pattern="/^[A-Z]{2}-\d{4}-[A-Z]{2}/g"/>
You can put your regex in the pattern attribute of the input element. I do not see you are using regexps yo have defined anywhere in your listing.
<input pattern={regex}/>
If you have a regex constraint to validate against it may be better and more comfortable to use Constraint Validation API.
<input pattern="your regex here"/>
Browser already validates everything in form elements if you constraint them with various ways like patter attribute and unless you tell it not to validate. But still I see many code bases trying to do the validation themselves. It is unnecessary since there is a way platform itself supports and does itself.

Using javascript, how to set a value to a number input that ends in decimal dot (ie. "100.")

Setup
Suppose I have an input like this: <input id="NumberInput" type="number" step="0.1" />
As this is a number field, it will accept digits, minus sign and decimal dot. Thus, browsers allow me to type in "100." (note the decimal dot at the end). If I leave the input, the value will still remain the same and it will allow me to return and finish the number (ie. "100.1").
Issue
I wasn't able to do this using JS in Chrome, as the following code:
document.getElementById('NumberInput').value = "100."
the input will be set to empty (regardless of the previous value) and the following error:
The specified value "100." cannot be parsed, or is out of range.`
I agree that this makes sense as "100." is by no means a valid number.
Question
Is there any way around this, so I can populate the start of a number input with JS and allow user to insert only decimal value (or edit the whole number)?
I an guessing that when typing in "100.", Chrome internally stores this value as "100" but shows the dot so that the user can continue later. This is exactly what I need, only using JS.
Notes
I know that defining input as type=text will solve this, but would also create some problems (which are irrelevant to this question)
Same error appears when using jQuery or any other JS library/framework
I haven't tested this on any other browser, as failing in Chrome alone is a show-stopper
Thanks in advance, cheers!
Since you're looking to accept non-number values (like "100.") I believe usage of type="number" is too specialized for you. I recommend you use type="text" and pattern, with a custom regex:
input:invalid { background-color: #ffa0a0; }
<input type="text" pattern="[1-9][0-9]*([.][0-9]?)?"/>
The pattern I used is:
[1-9][0-9]*([.][0-9]?)?
[1-9] any non-0 digit (since the leading digit shouldn't be 0)
[0-9]* any number of followup digits
( )? a whole optional section
[.] a single "." character
[0-9]? an optional single digit

how to retrieve any inserted string in input type 'number' in html

Is there any way of getting the inserted string(of any sort) from:
<input type="number" id='zipCode' name='zipcode' />
I'm trying to get value in console as:
console.log(document.getElementbyId('zipCode').value);
is giving just a blank output when any invalid string(string containing any alphabet or other special characters) is inserted which is also the same when actually left the field blank. But I want to retrieve the actual inserted value so that I can differentiate and validate the blank field with error message "Zipcode Field Empty!" and on invalid character string with error message "Invalid Zipcode!". Is there any way to retrieve any sort of inserted string from input type='number' field?
HTML input fields used for Zip Codes should be type=text and use the pattern attribute to provide hints to the browser
A numeric ZIP code is -- in a small way -- misleading.
Numbers should mean something numeric. ZIP codes don't add or subtract or participate in any numeric operations. 12309 - 12345 does not compute the distance from downtown Schenectady to my neighborhood.
ZIP codes aren't numbers -- they just happen to be coded with a restricted alphabet -- I suggest avoiding a numeric field. Same goes for credit card or social number
You can do <input type="text" pattern="\d*">. This will cause the numeric keyboard to appear on iOS (and Android?). Maybe it was pattern="[0-9]*"
"The semantically correct markup for a text field that can still
contain whitespace and other special characters is <input type="text" inputmode="numeric"/> however as far as I am aware while inputmode is
recommended by WhatWG it is not yet supported by any browsers. Its
intent is to present the user with a numeric keypad on a device that
has it but still behave as a text input." - davidelrizzo
From what I remember reading (example here - HTML5 input type=number value is empty in Webkit if has spaces or non-numeric characters?) there is no way of doing this with the input type set to number.

Force different characters at different positions

I'm currently working on a project in which I need to fetch street/city details from a DB using a zipcode. Dutch zipcodes use a "1111 AA" format, I would like to have this entered in a single input field while forcing the first four characters to be numeric and the last two to be alphabetical.
I've been googling this quite a bit, have found ways to force either one, but none to combine it into a single input field and I don't seem to be crafty enough to combine them myself.
Thank you.
We use this in alot of sites, especially for phone #s
http://digitalbush.com/projects/masked-input-plugin/
To handle the specific pattern you entered, try something like this in the javascript function that validates form input:
var pattern = new RexExp( '[0-9]{4} [A-Z]{2}' );
if( inputFieldValue.search( pattern ) == -1 )
{
// throw error condition.
}
else
{
// The pattern matched. Continue on.
}
This is finally a question where regular expressions are a suitable solution.
Try this:
var zip = "1111 AA"
var regex = new RegExp("^[0-9]{4}\\s?[A-Z]{2}$");
regex.test(zip);
Note that this will not allow lowercase characters, and will allow the zipcode without whitespace (like this: 1111AA). Try some googling to find out how to allow or disallow those.
You can use the new html5 pattern attribute for that:
<form>
<input name="zipcode" type="text" pattern="\d{4}\s?[A-Z]{2}" length="7" />
<input type="submit" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​
If the attribute isn't supported, you fall back to a javascript solution, checking the input field with a regex before submit like the following:
var pattern = /[0-9]{4}\s?[A-Z]{2}/;
string.match(pattern);
Take a look at the demo fiddle.

Categories