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

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