Проверка формы возвращает неверное значение

Question

Я пытаюсь проверить простую форму.

<form action="#"> 
    <input type="text" placeholder="Enter your name" id="name"/> 
    <button type="submit">Send</button> 
</form> 

Это код, который я использую.

var name = $('#name').val(); 

    $('form').submit(function(){ 
     checkForm(); 
    }); 

    function checkForm(){ 
     if(name === ''){ 
      $('#name').addClass('error'); 
      console.log('error'); 
     } else { 
      $('#name').removeClass('error'); 
      console.log('success!'); 
     }  
    } 

Проблема в том, что ошибка журнала консоли "каждый раз, независимо от моего ввода. Что мне здесь не хватает?

Answer 1

Переменная обновляется только на странице загрузки, когда наиболее вероятно вход пуст, после того, что при обновлении значения ввода, которое не отражено в названии переменной

Вместо чтения значения name поля в проверке метод, так что он будет содержать обновленное значение

$('form').submit(function() { 
    //optional to prevent form submit 
    return checkForm(); 
}); 

function checkForm() { 
    //read the value of name field here 
    var name = $('#name').val(); 
    if (name === '') { 
     $('#name').addClass('error'); 
     console.log('error'); 
     //return false to notify that there is an error 
     return false; 
    } else { 
     $('#name').removeClass('error'); 
     console.log('success!'); 
    } 
} 

Demo: Fiddle

Answer 2

Вы не прошли значение имени в функции с именем checkForm().

$('form').submit(function(){ 
    var name = $('#name').val(); 
    checkForm(name); 
}); 

function checkForm(name) { 
    if (name === '') { 
    $('#name').addClass('error'); 
    console.log('error'); 
    } else { 
    $('#name').removeClass('error'); 
    console.log('success!'); 
    } 
}