Email validation in form

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");
}
});

heres the site
http://testingmysite.x10host.com/AllenTrey/contact.html

im looking to get something similar to this

any help is greatly appreciated
thanks in advance :slight_smile:

Just a note of warning that email address validation is not as simple as it looks and this has resulted in interesting security issues.

For a good start on this, check out the OWASP Validation Cheat Sheet (a great reference for other regex you might use in other validations too).

/d

It is, if your browser supports HTML5. ;-) Like

<input type="email" required>

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

.error {
  color: red;
  display: none;
}
<form novalidate>
  <div>
    <div class="error">Please enter a valid email address</div>
    <label for="email">Enter Email</label>
    <input id="email" type="email" required>
  </div>
  <div>
    <input type="submit" value="Submit">    
  </div>
</form>
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'
    }
  })
})

fiddle

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. :-)

4 Likes

that worked perfectly! thank you so much :slight_smile: 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 :confused: 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

$(document).ready(function(){
    $('.send').attr('disabled',true);
    
    $('.textarea').keyup(function(){
        if($(this).val().length !=0){
            $('.send').attr('disabled', false);
        }
        else
        {
            $('.send').attr('disabled', true);        
        }
    })
});

Also is there a way to make this work in safari? I was reading around and realized it doesnt support this :confused:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.