Comfirmation of inputs before send get requests in a form

Question

I wonder how I can confirm the email is having a @ sign using javascript before submitting to signUp.php?

<form action='signUp.php'>
    <input type='text' name='email'>
    <input type='text' name='firstName'>
    <button value='submit'>
</form> 

Answer 1

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
// it's valid so do something
}
else {
// it's not valid so do something else
}

Answer 2

You need to use this javascript:

/@/.test(document.forms[0].email.value)

in your form:

<button value='submit' onclick='javascript: if (/@/.test(document.forms[0].email.value) == true) { document.forms[0].submit(); } else { return; }' />

I'd better prefer to use something like following:

HTML:

<form action='signUp.php' id='theform'>
    <input type='text' name='email' id='email'>
    <input type='text' name='firstName'>
    <button value='submit' onclick='javascript: checkform(); return;'>
</form>

Javascript:

var checkform = function() {
  var theform = document.getElementById('theform');
  if (is_email(document.getElementById('email').value))) {
    theform.submit();
  }
  return;
}
var is_email = function(val) {
  return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum|travel)$/.test(val)
}

^[a-zA-Z0-9._%+-]+@[A-Z0-9.-]+\.(?:[a-zA-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum|travel)$ is a regular expression that checks is a value is a valid email address string. In your question you've asked just to test an existence of @ in your string, but, hey! not@email will be matched! You certainly don't want to allow strings like that to be treated as valid email strings.

Basicly, you want to check your form data before form submit action. So you can do either:

• <form onsubmit='if (!checkform()) reutrn;'> or
• <input type='submit' onclick='checkform()' />

In checkform function you validate fields data and if validation is passed, you call submit method on html form object and you return false or nothing (e.g. return;) otherwise.

You should also learn how to use regular expressions within javascript here

Answer 3

You can capture the submit event on the form, check the email value, and conditionally allow or deny the form to post. Using jQuery (because..why would you not?) you'd do something like this:

<script>
$(document).ready(function()
{
    $('form').get(0).submit(function(event)
    {
        var email = $(this).find('input[name=email]').val();
        if (email.match(/.+?@.+/) == false)
        {
            event.preventDefault();
            return false;
        }
    });
});
</script>

Answer 4

Just use type="email" and a HTML5 forms emulation for older browsers.
http://thecssninja.com/javascript/H5F
https://github.com/ryanseddon/H5F

<input type='email' name='email'>

This not only validates that it contains a @, but also verifies a correct structure.

Answer 5

You must validate on the server, but you can add some user convenience by checking on the client first:

function checkEmail(el) {
  return /@/.test(el.value);
}

or a little more friendly:

function checkEmail(el) {
  if (!/@/.test(el.value)) {
    alert('Your e-mail address doesn\'t have an "@"' +
          ' sign, please add one');
    return false;
  }
}

And in the page:

<form ... onsubmit="return checkEmail(this.email);" ...>