javascript - 表单验证返回错误值

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

仅当输入很可能为空时，该变量才会在页面加载时更新，之后当您更新未反射(reflect)在名称变量中的输入值时

而是在验证方法中读取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!');
    }
}

演示:Fiddle