Form Validation Part II - JS and the Constraint Validation API

[@diggerdog001]

When i first time find out about constraint validation API i can't find high quality videos about this. Thanks god i found your video Professor

[@ThEldeRS]

First time that I ever see or hear about the validity API! Illuminating and instructive as always! Thank you for your videos and explanations!

[@frankgregory6845]

This is awesome! I've been using JS to validate code but had no idea these validate properties existed. To be able to generate a custom code that the browser delivers is great. Thanks for the lesson. I've learned a lot from your tutorials! Please keep going!

[@youmnaification]

Thanks for all your thorough tutorials. I subscribed to your channel years ago and now coming back to it to solidify my JS skills.

[@latabernadelcarpincho]

Great video! it helped me to get an idea of how to apply this API in my practice project

[@wlindstrom]

Very informative thanks my guy. I really appreciate the methodical and wide-angle approach.

[@KnightToD5]

Your content is excellent. You are my go-to resource.

[@soldadopreciso]

hello pal, tell us about why you use that APP Object ?, interesting approach.

[@SteveGriffith-Prof3ssorSt3v3]

Here ya go - ua-cam.com/video/exiC1Qsv5mc/v-deo.html

[@haldx]

Maybe you could use the novalidate attr temporarily while testing backend validation code.

[@SteveGriffith-Prof3ssorSt3v3]

that is really the only practical use case I can think of.

[@Sindoku]

I thought you was gonna say “anything that can go wrong, will go wrong” lol

[@yeahcharles7870]

Thanks for this video. A question regarding the final steps in the email validation example. You demonstrated how to update the span element that has the class .errMessage in the "fail" function. But how do we remove the span content if the user corrects the mistake and no longer needs to see the "Must be a valid Gmail address" text in the errMessage?
I tried extending your testEmail function but I'm not having much luck:
testEmail(ev) {
let email = ev.target;
//console.log(email.validity);
email.setCustomValidity(''); //clear old message
//built-in test for error based on type, pattern, and other attrs
let currently = email.checkValidity();
//console.log('currently', currently);
if (currently) {
let emReg = new RegExp('@gmail.com$', 'i');
if (emReg.test(email.value) === false) {
//not a gmail address
console.log('NOT a gmail address');
email.setCustomValidity('NOT a gmail address.');
console.log(email.validity);
email.reportValidity(); //show the custom message, trigger invalid event
} else {
// clear the content of the errMessage span
let span = email.parentElement.querySelector(".errMessage");
span.textContent = "";
};
}
},

[@SteveGriffith-Prof3ssorSt3v3]

We always want to clear out the old message at the start of the validation process.
Put your two lines of code right after
email.setCustomValidity('');

[@stalan7404]

20:54 "I dont want that appear anymore"
isn't it the opposite?
`email.setCustomValidity("");` means that turn `currently` true and check validity every change?

[@topspeedbrazil6853]

Hello my beautiful friend 🍃♥️🇧🇷

[@qzbnyv]

Could be my wild imagination, but you’ve sounded a little out of breath the last video or so. And I know things aren’t the best in North America atm. So I hope you’re doing well Steve and are safe and healthy.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks for your concern. My family and I are all doing well. I've got a cold (not covid) and am a bit congested that's all.

[@nuru484]

Too much unnecessary talk, why not go straight to the pooint? Mtcheew