jQuery 表单验证消息

Question

我在这里有一个 jsfiddle - http://jsfiddle.net/ac41qxsw/2/

这是一个带有验证的简单表单。

如果字段为空，我想通过添加带有消息的 p 标记来显示错误消息。

当字段为空时会触发警报，但我无法添加带有消息的 p 标签

        $('#btn').click(function(e){
            e.preventDefault();

            if(verfiyFields()){
                alert('passed');
            }else{
                alert('failed');
            }    

        })


        function verfiyFields(){
            var flag = true;

            if($('#name').val().length == 0 ){
                $(this).parent().append('<p>Please complete name</p>');
                alert('name');
                flag = false;
            }
            if($('#number').val().length == 0 ){
                $(this).parent().append('<p>Please complete number</p>');
                alert('number');
                flag = false;
            }

            return flag;
        }

Answer 1

更新代码：

var verfiyFields;
$(function(){
$('#btn').click(function(e){
e.preventDefault();

if(verfiyFields()){
    alert('passed');
}else{
    alert('failed');
}    

})
verfiyFields = function (){
var flag = true;

if($('#name').val().length == 0 ){
    $('#name').parent().append('<p>Please complete name</p>');
    flag = false;
}
if($('#number').val().length == 0 ){
    $('#number').parent().append('<p>Please complete number</p>');
    flag = false;
}

return flag;
}
});

工作小提琴：http://jsfiddle.net/robertrozas/ac41qxsw/7/

Answer 2

而不是在验证函数中使用 $(this).parent() 指定元素的名称。

在这种情况下，$(this) 指的是 $("#btn") 元素而不是 $("#name") 或 $("#number") 字段，因为您在点击事件中调用了该方法$("#btn")。