I'm using pattern attribute of html but it's failing in for some reason so I'm thinking on how to create regex for javascript.
Highlighted part of the image is the format that I'm validating using this regular expression pattern attribute pattern="[A-Z]{4}[0-9]{7}". I still can't manage to build this using javascript.
Any answers/reference/solution is appreciated!
Your RegExp is correct but use ^ in first and $ in last of it. then add required attribute like this:
<form>
<input type="text" name="formField" pattern="^[A-Z]{4}[0-9]{7}$" required />
<input type='submit'/>
</form>
And if you want to use javascript:
HTML:
<form>
<input type="text" name="formField" />
<input type="button" value='submit'/><input style='display: none' type='submit'/>
</form>
javascript:
document.querySelector('[type="button"]').onclick=function(){
if(/^[A-Z]{4}[0-9]{7}$/.test(document.querySelector('[name="formField"]').value)==false) return alert("Please check input value and try again!");
this.nextSibling.click()
};
And, if you have not form, you can try this simple way:
HTML:
<input type="text" name="formField" />
<input type="button" value='Add'/>
javascript:
document.querySelector('[type="button"]').addEventListener("click", function(){//or onclick = ...
if(/^[A-Z]{4}[0-9]{7}$/.test(document.querySelector('[name="formField"]').value)==false) return alert("Please check input value and try again!");
alert("Is OK!!");
});
Try this for check manually typing:
document.querySelector('[name="formField"]').addEventListener("keyup", function(ev){
if(/^[A-Z]{4}[0-9]{7}$/.test(document.querySelector('[name="formField"]').value)==false) return this.style.backgroundColor="#f88";
this.style.backgroundColor="#0f0";
});<input type="text" name="formField" placeholder='Type here 4 test!'/>
Same pattern code will work in JS
var pattern = /[A-Z]{4}[0-9]{7}/
var qry = 'ASDF4567543';
if(qry.match(pattern)) {
alert('valid');
}
else{
alert('invalid');
}
Your regex will work fine in JS. You just need to add start (^) and end ($) of string anchors to it, otherwise it will also match strings that are longer than 11 characters.
let container='QWSA1231231';
console.log(/^[A-Z]{4}[0-9]{7}$/.test(container));
container='QWSA123121';
console.log(/^[A-Z]{4}[0-9]{7}$/.test(container));
container='QWSA12312312';
console.log(/^[A-Z]{4}[0-9]{7}$/.test(container));
pattern?