ohkay so im looking to have some sort of email validation in my form so if an email isnt valid an error shows and the message cannot be sent . im not to familiar with JS so excuse my ignorance but heres what i originally tried and of course didnt work as i wanted lol
var email = document.getElementsByClassName("email")[0].className;
var validation = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$('.send').on('click',function() {
if (!email.match(validation)) {
alert("no match");
}
else {
alert("match");
}
});
Now this will display a browser-specific error message if the field is not valid, which you can’t style. But you can disable it with novalidate and then use the HTML validation API from within your JS, like
const form = document.querySelector('form')
const inputs = form.querySelectorAll('input')
form.addEventListener('submit', function (evt) {
Array.from(inputs).forEach(input => {
const error = input.parentNode.querySelector('.error')
// If there is an error field and the input is not
// valid, show the error and prevent the submit
if (error && !input.validity.valid) {
evt.preventDefault()
error.style.display = 'block'
} else {
error.style.display = 'none'
}
})
})
This would check all input fields in the form for their HTML validity constraints, and display the corresponding error if it fails; if there’s only that single email input, you might of course check that field explicitly instead (w/o the Array iteration).
Anyway, I think it’s preferable to use the validation API instead of some longish unreadable regular expressions – it’s already there at your disposal after all. :-)
that worked perfectly! thank you so much is there any way to check the name field as well? i tried and got this https://jsfiddle.net/t87aw20j/6/ i tried a couple other ways as well but none worked lol it would only check one or the other also if the message is empty make the send disabled i used this code which worked but idk how to style the button while its disabled if thats even possible lol im just trying to have it greyed out