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

不要在verificiation函数中使用$（this）.parent（），而是指定元素的名称。

在这种情况下，$（this）指的是$（＆＃34;＃btn＆＃34;）元素而不是$（＆＃34;＃name＆＃34;）或$（＆＃34;＃ number＆＃34;）字段，因为您在$（＆＃34;＃btn＆＃34;）的点击事件中调用了该方法。

Answer 2

更新的代码：

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/