валидация формы jQuery - 'propect ()' Проблема
-
19-09-2019 - |
Вопрос
Я пытаюсь научиться проверять форму, и у меня есть эта проблема:
Когда я запускаю этот код и ничего не ввожу - форма не должна отправлять, но это так. Мой вопрос ... почему, и как я могу это исправить?
HTML:
<form method="post" action="#">
<fieldset>
<legend>Formular</legend>
<label for="name">Name: </label>
<input type="text" class="required" name="name" value="" />
<br /><br />
<label for="pass">Password: </label>
<input type="password" class="required" name="pass" value="" />
<br /><br />
<input type="submit" value="Submit!" />
</fieldset>
</form>
jQuery:
$('#obal form').submit(function() {
$('.required').each(function() {
if($(this).val() == "") {
if (errorCount === undefined) {
var errorCount = 1;
} else {
++errorCount;
}
}
});
if (errorCount > 0) {
window.alert( 'You didnt pass' );
return false;
} else {
return true;
}
});
Если вы знаете какие-либо другие улучшения, которые может принять код, вы можете сказать мне, спасибо .. :-)
Решение
Ваш текущий код не работает, потому что ErrorCount является локальной для анонимной функции, переданной для каждого метода. Это не будет видно снаружи.
Это означает, когда вы делаете errorCount > 0
После каждого вашего метода он оценивается в FALSE и подчиняется форме.
Я бы написал это так, как эта функция,
$('#obal form').submit(
function(ev)
{
var errorCount = 0; //define your errorCount variable to zero before you
//iterate using each, errorCount will be available inside your each iteration function.
$('.required').each(
function()
{
//Due to JavaScript clousures, you can access errorCount in this function.
if($(this).val() === '')
errorCount++;
}
);
//If we don't find any errors, we return. This will let the browser continue submitting the form.
if(errorCount == 0)
return;
//If control comes here, it means there were errors. Prevent form submission and display error message.
ev.preventDefault();
alert('Validation failure.');
}
);
РЕДАКТИРОВАТЬ:
Почему ваш код не работает?
Давайте дадим имя анонимной функции (скажем, Myeachloop), переданный методу.
$('#obal form').submit(function() {
$('.required').each(
function myEachLoop ()
{
if($(this).val() == "") {
if (errorCount === undefined) {
var errorCount = 1; //you have defined the errorCount which is 'local' to the 'myEachLoop' function. Once myEachLoop function is over. errorCount variable is gone!
} else {
++errorCount;
}
}
});
//errorCount is 'undefined' here because the previously defined errorCount variable is gone.
if (errorCount > 0) {
window.alert( 'You didnt pass' );
return false;
} else {
return true;
}
});
Вы сейчас видите ошибку в своем коде?
Вы также должны понимать закрытие JavaScript, чтобы узнать, почему мой код работает.
Другие советы
Измените это:
$('#obal form').submit(function() {
к этому:
$('#obal form').submit(function(event) {
event.preventDefault();
И если ваша форма действительна, сделайте это (в рамках вашей функции. Submit):
$(this).submit();
и ваша форма будет отправлена.
Вы можете попробовать этот jQuery плагин. Анкет Он чрезвычайно гибкий и простой в использовании.
Я бы объявил об ошибках до цикла, чтобы убедиться, что область верна:
var errorCount = 0;
$('.required').each(function() {
if($(this).val() == "") {
errorCount++;
}
});