Подтверждение базовой формы JQuery

Question

Я пытаюсь создать свою собственную базовую проверку формы, не прибегая к мощным плагинам одного размера для всех, и я написал следующий код. Кажется, неважно, как часто я переписываю его и начинаю, я не могу заставить его работать.

Идея состоит в том, что скрипт проверяет форму, чтобы проверить, были ли все поля заполнены, и если это удаляет отключенный атрибут из кнопки отправки.

Функция: -

function checkForm(){ 
$('#contact :input').each(function(){ 
    if($(this).attr('value') == null){ 
    var checked = false; 
    } else { 
    var checked = true; 
    } 
}) 
if (checked == true){ 
    alert('all filled in'); 
    //remove disabled attribute from button 
} else { 
    alert('not completed'); 
    //add disabled attribute to button 
} 

} 

И код, который вызывает функцию: -

$('#contact :input').blur(function(){ 
    if ($(this).val() <= ''){ 
     $(this).next('.error').show(); 
    } else { 
     $(this).next('.error').hide(); 
     checkForm(); 
    } 
}) 

Я возился с этим весь день, и я изо всех сил, чтобы найти ответ с помощью Google ,

Answer 1

function checkForm(){ 
    var checked = true; 
    $('#contact :input').each(function(){ 
    if(!$.trim($(this).val()).length) checked = false; 
    }) 
    if (checked){ 
    alert('all filled in'); 
    //remove disabled attribute from button 
    } else { 
    alert('not completed'); 
    //add disabled attribute to button 
    } 
} 

И вызвать функцию

$('#contact :input').on('blur', function(){ 
    if (!$.trim($(this).val()).length){ 
     $(this).next('.error').show(); 
    } else { 
     $(this).next('.error').hide(); 
     checkForm(); 
    } 
}) 

Answer 2

вы можете использовать jquery.validate() функцию для этого и его ссылка URL является: http://docs.jquery.com/Plugins/Validation

Answer 3

коррекция:

function checkForm(){ 
$('#contact :input').each(function(){ 
if($(this).val() == ''){ 
    var checked = false; 
    } else { 
var checked = true; 
} 
}) 
if (checked == true){ 
alert('all filled in'); 
//remove disabled attribute from button 
} else { 
alert('not completed'); 
//add disabled attribute to button 
} 

} 

и

$('#contact :input').blur(function(){ 
if ($(this).val() == ''){ 
    $(this).next('.error').show(); 
} else { 
    $(this).next('.error').hide(); 
    checkForm(); 
} 
}) 

Answer 4

Поскольку вы создаете " checked "внутри анонимной функции .each(), проверенная переменная недоступна вне этой функции для теста if (checked == true) (вы получаете ошибку« checked is undefined ») поэтому ваши предупреждения не стреляют.

Попробуйте сначала определить переменную 'checked' за пределами анонимной функции, а затем обновить ее соответствующим образом.

function checkForm() { 

    var checked = true; 

    $('#contact :input').each(function() { 
     if ($(this).val() == '') { 
      checked = false; 
     } 
    }) 

    if (checked == true) { 
     alert('all filled in'); 
     //remove disabled attribute from button 
    } else { 
     alert('not completed'); 
     //add disabled attribute to button 
    } 

} 

$('#contact :input').blur(function() { 
    if ($(this).val() == '') { 
     $(this).next('.error').show(); 
    } else { 
     $(this).next('.error').hide(); 
     checkForm(); 
    } 
}) 

Вот пример jsFiddle. http://jsfiddle.net/DMLzK/1/