Dlaczego mój formularz HTML jest nadal przesyłany, gdy zwracam wartość false z pliku onsubmit?

Question

napisałem prosty skrypt walidacji formularza logowania, co następuje:

<script type="text/javascript"> 
    function validateLoginForm(){ 
    var idV = document.forms["LoginForm"]["id"].value; 
    var pwdV = document.forms["LoginForm"]["pwd"].value; 

    if (idV == null || idV == "" || idV.length < 5) { 
      alert("user ID must be filled and of more than 4 characters!!"); 
      id.focus(); 
      return false; 
    } 

    if (pwdV == null || pwdV == "" || pwdV.length < 5) { 
     alert("Password must be filled and of more than 4 characters!!"); 
     pwd.focus(); 
     return false; 
    } 

    return true; 
} 
</script> 

i nazwać jak:

<form name="LoginForm" method="POST" onsubmit="return validateLoginForm()" action="Login" > 
. 
. 
. 
. 
</form> 

Problemem jest to, czy Javascript daje się alert, jak i prawidłowo ustawione, ale w końcu Serwlet Login również wywoływany jest automatycznie, co jest niewłaściwe. Dlaczego tak się dzieje? Jakieś rozwiązanie?

Answer 1

Przekierowanie do logowania dzieje się, ponieważ masz błąd js.

Nie definiujesz zmiennej id i psw.

Więc podczas próby id.focus() lub psw.focus() - trzeba js błąd i powrócić prawda domyślnie

więc dodać ten kod:

var id = document.forms["LoginForm"]["id"]; 
var pwd = document.forms["LoginForm"]["pwd"]; 
var idV = document.forms["LoginForm"]["id"].value; 
var pwdV = document.forms["LoginForm"]["pwd"].value; 

Answer 2

spróbować tego,

<script type="text/javascript"> 
    function validateLoginForm(){ 
    var idV = document.forms["LoginForm"]["id"].value; 
    var pwdV = document.forms["LoginForm"]["pwd"].value; 
    var err = ''; 
    if (idV == null || idV == "" || idV.length < 5) { 
      err = "user ID must be filled and of more than 4 characters!! \n"; 
      document.getElementById("id").focus() 
    } 

    if (pwdV == null || pwdV == "" || pwdV.length < 5) { 
     err = "Password must be filled and of more than 4 characters!! \n"; 
     document.getElementById("pwd").focus() 
    } 
    if(err == '') 
     return true; 
    else 
     { 
     alert(err); 
     return false; 
     } 
} 
</script> 

Answer 3

Bez ciebie oddanie w całej zawartości formularza nie mogę być pewny, ale zamierzam się tutaj dobrze zgadnąć. Zamierzam powiedzieć, że twoje tagi dla ID użytkownika i hasła mają TYLKO atrybuty nazwy?

Kiedy zajmujesz się formularzami w HTML, musisz użyć "name =" dla nazw parametrów, które mają zostać przekazane do skryptu odbierającego. To właśnie nadaje twojemu skryptowi? Id = blah & pwd = blah bit w adresie URL lub jako ładunek danych postu.

Jednak ....

Gdy korzystające wartości za pomocą DOM (Document Object Model), jak jesteś w skrypcie, to trzeba mieć element identyfikowany z „id =” atrybutu.

To samo dotyczy dowolnego elementu w dokumencie, do którego należy uzyskać dostęp za pomocą skryptowego podejścia w js. Jeśli zauważysz również, otrzymasz alert, ale jeśli nie powrócisz, twoje wywołanie fokusa również nigdy nie zostanie wywołane, to właśnie spowoduje to skasowanie twojego skryptu, ponieważ element o nazwie "id" nie może być uznany.

dodaj id = "id" i id = "pwd" obok twoich nazw = atrybut "id" i name = "pwd" w twoich znacznikach wejściowych, a powinieneś znaleźć, że wszystkie będą działać zgodnie z oczekiwaniami. EG:

<input type="text" name="id" id="id" ... /> 

Na ostatniej nuty, to zachęcam jednak do ponownego zapisu tej funkcji przy użyciu coś jak jQuery, znajdziesz model znacznie bardziej intuicyjny i wieloplatformowym obsłudze.

Answer 4

Utworzyłem minimalny przypadek testowy tutaj: http://www.pauldwaite.co.uk/test-pages/7723381/

<script> 
function pretendValidation(){ 
    alert("Validatation failed!"); 
    return false; 
} 
</script> 

<form action="http://www.google.co.uk/" method="POST" onsubmit="return pretendValidation();"> 
    <input type="submit" value="Submit"> 
</form> 

Po kliknięciu na „Wyślij”, alarm się dzieje, a forma nie złoży. Więc teoretycznie Twój kod powinien zadziałać.

Jako @Shawty mentioned, możesz mieć problem z formularzem HTML. Jeśli opublikujesz cały kod HTML, możemy to sprawdzić.

Answer 5

Najlepsza praktyka: jeśli chcesz nie gwarantuje przesłać formularz, nawet jeśli twój JavaScript rzuca pl wyjątku, należy owinąć kod w try bloków/haczyk:

<script type="text/javascript"> 


function validateLoginForm(){ 
    try{ 
    var idV = document.forms["LoginForm"]["id"].value; 
    var pwdV = document.forms["LoginForm"]["pwd"].value; 

    if (idV == null || idV == "" || idV.length < 5) { 
     alert("user ID must be filled and of more than 4 characters!!"); 
     id.focus(); 
     return false; 
    } 

    if (pwdV == null || pwdV == "" || pwdV.length < 5) { 
     alert("Password must be filled and of more than 4 characters!!"); 
     pwd.focus(); 
     return false; 
    } 
}catch(e){ 
    console.log(e); 
    return false; 
} 

return true; 
} 
</script> 

Answer 6

Well, o dziwo moja forma nadal składać nawet kiedy wróciłem false z mojego function i wrócił zwrot tej funkcji w celu utworzenia na onsubmit ... próbowałem nawet:

onsubmit="return false;" 

Nie wiem co się dzieje ... w każdym razie przesunięcie wyzwalacza zdarzeń na zdarzenie onclick naprawiono problem.

Aktualizacja: Skończyło się na stwierdzeniu, że kod byłem już kolejna edycja obsługi JS dołączone do zdarzenia onsubmit który jest dlaczego to ignorowanie moich return false;