Javascript не работает перед отправкой в ​​php файл

Question

Я узнаю больше о PHP / Javascript, пытаюсь настроить базовый веб-сайт. У меня все готово и работает, но нет никакой проверки при регистрации и еще много чего. Я пытаюсь использовать Javascript для проверки формы перед ее отправкой, но она не работает для меня. Вот моя страница:

<script language="JavaScript" type="text/javascript">
OK = false;
function validateEmail() {
    var x = document.forms["form1"]["myemail"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if(atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
        alert("Not a valid e-mail address");
        return false;
    }
}

function notShortUsername() {
    var x = document.forms["form1"]["myusername"].value;
    if(x.value.length < 6) {
        // set the focus to this input
        OK = false;
    }
    OK = true;
}

function notShortPassword() {
    var x = document.forms["form1"]["mypassword"].value;
    if(x.value.length < 6) {
        alert(helperMsg);
        elem.focus();
        // set the focus to this input
        OK = false;
    }
    OK = true;
}

function validate () {
    notShortUsername();
    notShortPassword();
    validateEmail();

    if(OK) {
        form.submit();
        return true;
    } else {
        //do something else
        alert("You did it wrong!");
        return false;
    }
} 
</script>

<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
  <tr>
  <form name="form1" method="post" action="registervalidation.php" onsubmit="return validate">
    <td>
      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
        <tr>
          <td colspan="3"><strong>Member Login </strong></td>
        </tr>
        <tr>
          <td width="78">Username</td>
          <td width="6">:</td>
          <td width="294">
            <input name="myusername" type="text" id="myusername" />
          </td>
        </tr>
        <tr>
          <td>Password</td>
          <td>:</td>
          <td>
            <input name="mypassword" type="password" id="mypassword" />
          </td>
        </tr>
        <tr>
          <td>Email</td>
          <td>:</td>
          <td>
            <input name="myemail" type="text" id="myemail">
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>
            <input type="submit" name="Submit" value="Complete Registration">
            <input type="submit" name="Submit" value="Cancel">
          </td>
        </tr>
      </table>
    </td>
  </form>
  </tr>
</table>

Я также пытался использовать это: http://docs.jquery.com/Plugins/Validation

Проблема в том, что он не будет проверяться, когда предмет теряет фокус, и все равно отправляет php.

Answer 1

onsubmit="return validate();"

Не не забыть ();

Answer 2

Проверьте вашу функцию проверки вне формы отправки:

<a href="#" onclick="validate();">test</a>

Вы увидите в консоли ошибку, сообщающую, что x не определен.

Uncaught TypeError: Невозможно прочитать свойство 'length' из неопределенного

Таким образом, скрипт прекращает выполнение и никогда не возвращает false, что позволяет форме отправлять сообщения.

Answer 3

изменить это:

var x = document.forms["form1"]["myusername"].value;
if(x.value.length < 6) {

до:

var x = document.forms["form1"]["myusername"].value;
if(x.length < 6) {

и это:

var x = document.forms["form1"]["mypassword"].value;
if(x.value.length < 6) {

до:

var x = document.forms["form1"]["mypassword"].value;
if(x.length < 6) {

В каждом случае var x уже содержит значение, поэтому вы получите длину непосредственно на x.length