On some browsers, inputs like date, time, datetime-local, number are not implemented and are considered as text inputs.
I made these RegExp to check these input values :
const RegExpYear = '(000[1-9]|00[1-9]\\d|0[1-9]\\d\\d|100\\d|10[1-9]\\d|1[1-9]\\d{2}|[2-9]\\d{3}|[1-9]\\d{4}|1\\d{5}|2[0-6]\\d{4}|27[0-4]\\d{3}|275[0-6]\\d{2}|2757[0-5]\\d|275760)',
RegExpMonth ='(0[1-9]|1[012])',
RegExpDay = '(0[1-9]|[12]\\d|3[01])',
RegExpHour = '(0\\d|1\\d|2[0-4])',
RegExpMinSec = '(0\\d|[1-5]\\d)',
RegExpMilli = '(00\\d|0[1-9]\\d|[1-9]\\d{2})',
patternWeek = new RegExp('^'+RegExpYear+'-W(([1-4][0-9])|(5[0-3])|0[1-9])$'),
patternMonth = new RegExp('^'+RegExpYear + '-' + RegExpMonth + '$'),
patternDateTimeLocal = new RegExp('^' + RegExpYear + '-' + RegExpMonth + '-' + RegExpDay + 'T' + RegExpHour + ':' + RegExpMinSec + '(?::' + RegExpMinSec + ')?(?:\.' + RegExpMilli + ')?$'),
patternDate = new RegExp('^' + RegExpYear + '-' + RegExpMonth + '-' + RegExpDay + '$'),
patternTime = new RegExp('^' + RegExpHour + ':' + RegExpMinSec + '(?::' + RegExpMinSec + ')?(?:\.' + RegExpMilli + ')?$'),
patternNumber = new RegExp('^-?\d+\.?(\d+)?([eE][+-]?\d+)?$');
document.querySelectorAll('[type=datetime-local], [type=date], [type=time], [type=month], [type=week], [type=number]').forEach(function(a){
let type = a.type,
attrtype = a.attributes.getNamedItem('type').value,
pattern;
if (type !== attrtype) {
switch(attrtype) {
case 'number' : pattern = patternNumber; break;
case 'week' : pattern = patternWeek; break;
case 'month' : pattern = patternMonth; break;
case 'datetime-local' : pattern = patternDateTimeLocal; break;
case 'date' : pattern = patternDate; break;
case 'time' : pattern = patternTime; break;
}
a.addEventListener('input',function(e){
let test = pattern.test(this.value);
if (test) {
a.classList.add('valid')
a.classList.remove('invalid')
} else {
a.classList.add('invalid')
a.classList.remove('valid')
}
});
}
});
This way I can style the wrong entries but can't prevent form submit.
Is it possible to add a constraint that passes through the ValidityState property ?
You won't have to revalidate all the inputs or prevent form submission inside onsubmit event handler, if you use the inbuilt DOM Constraint Validation API. Every input element validates itself and reports to form if it's valid or invalid. Special handling can be done inside onInput event handler.
Demo:
const fruitRegx = "(?!\s*[Mm]ango).*" // we don't want mango
// set patterns on all required input elements
let inpt = document.getElementById('choose');
inpt.setAttribute("pattern", fruitRegx);
// set input handlers
inpt.addEventListener('input', function(e) {
if (inpt.validity.patternMismatch) {
inpt.setCustomValidity("I said no mango!!");
// if pattern doesn't mismatch report it
// rest is taken care of automatically
inpt.reportValidity();
} else {
inpt.setCustomValidity("");
}
});
// this one has no pattern assigned, so doing validation manually
choose2.addEventListener('input', function(e) {
let val = e.target.value;
if (val.includes("banana")) {
e.target.setCustomValidity("How dare you!!");
e.target.reportValidity();
} else {
e.target.setCustomValidity("");
}
});
function send(event) {
// mimicking form submit
output.innerHTML += `Requesting ${choose.value} and ${choose2.value}...<br>`;
// just for the demo preventing form submission
event.preventDefault();
return false;
}input:invalid {
background-color: rgb(255, 196, 196);
}
input:valid {
background-color: lightgreen;
}<form onsubmit="send(event)" target="_self">
<label for="choose">What fruit would you prefer? Except mango!</label><br>
<input id="choose" required><br><br>
<label for="choose">This one doesn't have pattern validation. But don't enter 'banana'!</label><br>
<input id="choose2" required><br><br>
<button>Submit</button>
<pre id=output></pre>
</form>If you type 'mango' in above demo, send method doesn't get called.
Also note how the <input> automatically gets :valid and :invalid CSS pseudo classes. So the styling is taken care of automatically.
If you are looking for solution to prevent form submission then above demo is already doing it. Fore more refer https://stackoverflow.com/a/8664680/15273968