JavaScript: Почему моя форма не отправляется?

Question

Моя проблема в том, что моя форма, <form name="enrollment" method="post" action="submit.php"> не отправит. Моя кнопка отправки выглядит так: <input class="buttons" type="submit" name="submit" onclick="return validate()" value="Submit" />.

Он называет эту функцию JavaScript:

// Returns true if there are no errors and false if there are errors 
function validate() { 
    // Something is not returning true here so that the form is not being submitted 
    if (!window.err_exist) { 
    // No errors 
    return true; 
    } 
    // There are errors 
    alert("Errors exist in the form!"); 
    return false; 
} 

Переменная window.err_exist определяется в функции getReviewValues(). В getReviewValues() я установил window.err_exist = false;. Затем я проверить форму с условным видом:

// Name 
var r_string = "Name: "; 

if (document.forms["enrollment"]["name"].value.trim() == "") { 
    r_string += "<span class=\"error\">This is a required field!</span>"; 
    window.err_exist = true; 
} else { 
    r_string += document.forms["enrollment"]["name"].value; 
} 

Затем, в конце getReviewValues() я return r_string; для динамической обратной связи по статусу формы валидаций. То есть, такие сообщения, как "Name: This is a required field!".

Теперь, если я заполняю свою форму, но оставляю некоторые вещи пустыми, чтобы у меня были ошибки проверки, я получаю предупреждение "Errors exist in the form!" и форма не отправляется. Большой! Однако, когда я заполняю свою форму, чтобы у меня не было ошибок проверки, я делаю не, чтобы получить сообщение об ошибке. Большой! Но, о нет! Форма по-прежнему не подает. И это должно быть!

Итак, поскольку я не получаю сообщение об ошибке, путь выполнения должен находиться в условном if (!window.err_exist). Я вижу это, потому что функция возвращает true, чтобы функция никогда не получала сообщение. Но, если он возвращает true, тогда моя форма должна быть отправлена. Поэтому он должен возвращать false, так как форма не отправляется. Но если он возвращает false, тогда путь выполнения не может быть в предполагаемом условном выражении. Если бы это было так, я бы получил сообщение, но я не получил сообщение. Это противоречие.

У кого-нибудь есть идеи?

Answer 1

Вместо обработчика onclick в вашей кнопке отправки используйте событие onsubmit в элементе формы. Например:

<form onsubmit="return validate()"> 

На данный момент, до тех пор, как ваш метод проверки возвращается истинным или ложным правильно ... он должен вести себя, как вы ожидаете.

См. http://www.w3schools.com/jsref/event_form_onsubmit.asp для получения более полной справки.

Answer 2

Когда вы проверяете успех (window.err_exist! = False), скрипт возвращает true. Таким образом, вы возвращаете true для события click, а не для отправки.

Это может быть исправлено, делая то, что jeltine говорит <form onsubmit="validate()"> или это может быть исправлено путем замены

<input class="buttons" type="submit" name="submit" onclick="return validate()" value="Submit" /> 

с

<input class="buttons" type="button" name="submit" onclick="validate()" value="Submit" /> 

Тогда изменение функции Validate для вызова form.submit(); на каких-либо ошибок.

Пример:

//must add id to get element by id 
    <form name="enrollment" id="enrollment" method="post" action="submit.php"> 

function validate() { 
    // Something is not returning true here so that the form is not being submitted 
    if (!window.err_exist) { 
    // call submit on form 
    var myform = document.getElementById("enrollment"); 
    myform.submit(); 
    } 
    // There are errors 
    alert("Errors exist in the form!"); 
    return false; 
} 

Преимущество делать это таким образом, что у вас есть больший контроль над изменением параметров формы, такие как действие или метод, если это необходимо.Если они не понадобятся, просто измените на onsubmit="".