Javascript - проблема с проверкой моей формы

Question

У меня проблема со сценарием проверки моего php form для отправки электронного письма, и хотя он очень хорошо подходит для проверки формы, когда пользователь нажимает кнопку "принять" наalert, скрипт не блокирует действие, а форма все равно отправляется ...

Что я делаю не так?

Заранее спасибо!

HTML:

<div id="form">
 <section>
  <form action="send.php" method="post" accept-charset='UTF-8'>
  <label for="email"></label>
  <input id="email" type="email" name="email" maxlength="50">
  <input type="hidden" name="privacy" value="blahblahblah"/>

  <input id="submit" type="submit" name="submit" value="SEND" onclick="validate(this);">

  </div>
  </form>
 </section>
</div>

СКРИПТ (проверка):

function validate () {
    var email;
    email = document.getElementById("email").value;
    expresion = /\w+@\w+\.+\w/;

if(email === "") {
    alert("You cannot submit this request. You must give us an email");
    return false;
    }

else if (email.length>50) {
    alert("The maximum for email is 50 characters");
    return false;
    }

else if (!expresion.test(email)) {
    alert("Check your information. The email format is not valid");
    return false;
    }
}

Answer 1

Измените событие на отправку и поместите его в форму.

function validate () {
    var email;
    email = document.getElementById("email").value;
    expresion = /\w+@\w+\.+\w/;

if(email === "") {
    alert("You cannot submit this request. You must give us an email");
    return false;
    }

else if (email.length>50) {
    alert("The maximum for email is 50 characters");
    return false;
    }

else if (!expresion.test(email)) {
    alert("Check your information. The email format is not valid");
    return false;
    }
  console.log('passed!');
}

<div id="form">
    <section>
        <form action="" method="post" accept-charset='UTF-8' onsubmit="return validate(this);">
            <label for="email"></label>
            <input id="email" type="email" name="email" maxlength="50">
            <input type="hidden" name="privacy" value="blahblahblah"/>

            <input id="submit" type="submit" name="submit" value="SEND">
        </form>
    </section>
</div>