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!');
    }
}

演示：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!');
  }
}

表单验证返回不正确的值

2 个答案: