Sprawdzanie formularza poprzez javascript

Nawet początkujący webmasterzy  wiedzą jak ważna jest weryfikacja formularzy uzupełnianych przez użytkowników. Wysłanie na serwer niepełnych danych może doprowadzić do problemów w funkcjonowaniu witryny,  zakładaniu nowego konta bądź realizowaniu zleceń. Z pewnością weryfikacja powinna nastąpić po stronie serwera, jakoże w ten sposób  możliwe jest również zabezpieczenie przed atakami typu xxx-injection podczas, których użytkownik brutalnie 'wstrzykuje' kod SQL, html lub wykorzystuje formularz  kontaktowy do rozsyłania spamu przez co dostajemy mailowy ban na wszystkich liczących się światowych serwerach.

Jakkolwiek pomimo niezbędnej weryfikacji przez serwer warto również pomyśleć o  wstępnej walidacji przy użyciu javascript, dzięki której:

• użytkownik zostanie poinformowany o niewłaściwym wypełnieniu formularza jeszcze przed jego wysłaniem, co pozwoli mu dokonać korekty bez konieczności przeładowania strony
  
• korzystanie z javascriptów obciąża komputer użytkownika a nie serwer
• witryna zyskuje na atrakcyjności ponieważ jest bardziej przyjazna użytkownikowi

Oto przykład najprostszego skryptu sprawdzającego czy wszystkie pola formularza zostały wprawdzone przez użytkownika:

<script>
function checker(form)

//sprawdzenie czy wszystkie sš uzupełnione
for (var i=0; i< form.elements.length; i++)  
if (form.elements[i].value=='')
if (form.elements[i].name!='')
{  
document.getElementById('valid').innerHTML="W formularzu pozostaly niewypełnione pola!";
return false;
}    
//sprawdzenie czy przykładowe hasła do siebie pasujš
if (document.getElementById('pass1').value != document.getElementById('pass2').value)
{
document.getElementById('valid').innerHTML="Hasla nie pasuja do siebie";
return false;
}
return true;
}
</script>

Zasada działania jest bardzo prosta i uniwersalna; skrypt sprawdza kolejno wszystkie pola w pętli, nie musi mieć zatem podanej nazwy elementów co powoduje, że skrypt ten jest w stanie obsłużyć każdy formularz pod, który zostanie 'podpięty' bez względu na strukturę owego formularza. Błąd zostaje zwrócony do diva o id='valid' jakoże stosowane alertów w javacriptach jest miemodne i żadko stosowane w szanujących się witrynach.

W ramach testu skrypt został 'podpięty' do właściwości onSubmit następującej formy:

<div id='valid' style='color: red;'></div>
<div>
<form id='myForm' onSubmit='return checker(this);' action="" method="post" ENCTYPE="multipart/form-data">
<div>pole1</div>
<div><input name='pole1' type='text' size='10'/></div>
<div>pole2</div>
<div><input name='pole2' type='text' size='10'/></div>
<div>pole3</div>
<div><input name='pole3' type='text' size='10'/></div>
<div>hasło</div>
<div><input name='pass1' id='pass1' type='password' size='10'/></div>
<div>powtórz hasło</div>
<div><input name='pass2' id='pass2' type='password' size='10'/></div>
<div>select</div>
<div>
<select name='pole4'>
<option selected='selected' value='True'>tak</option>
<option value='False'>nie</option>
</select>
<div><input type='submit' value='sprawdz'></div>
</div>
</form>
</div>