在jQuery中显示消息的验证问题

时间:2014-01-08 12:43:02

标签: javascript jquery html css jquery-validate

我已经对我的表单进行了一些验证,毕竟,我的输入字段中有一些div,其输入字段的id为。

我想在这些div中打印错误。这意味着:如果 我希望在html中输入一些输入,在输入之前,在该div中设置errorMessage。

问题是库jquery.validate.js在无线电元素之间写错误并且看起来不太好。

有关如何实现这一点的想法吗?

例如(HTML):

 <tr>
    <td>
     <label for='question2'>Some question</label>
</td>
<td valign='top'>
     <input type='radio' name='question2' value='1'/>Answer1<br />
     <input type='radio' name='question2' value='2'/>Answer2<br />
     <input type='radio' name='question2' value='3'/>Answer3<br />
     <input type='radio' name='question2' value='4'/>Answer4<br />
</td>
 </tr>
 <tr>
<td>
     <div id='question23Error'></div>

           //I WOULD LIKE TO PUT HERE MESSAGE FOR ALL INPUT INDIVIDUALLY

</td>

jQuery的:

$(document).ready(function() {
$('#surveyData').validate({

errorContainer: '#errorbox',   //THIS CODE IS ONLY USEFUL IF YOU HAVE A FORM WITH 5 INPUT'S, IF YOU HAVE 30 INPUTS THAN IT BRINGS ALL ERRORS AT BEGGINING OF THE FORM AND IT ISN'T TRANSPARENT
errorLabelContainer: '#errorbox ul', //
wrapper: 'li', //

    rules: {
        surname : { 
            required:true,
            minlength: 2, 
        }, 
        question1: { 
            required:true,
            minlength: 2, 
        }, 

        question2 : { 
            required: true, 
            }, 

        question3 : {
            required: true, 
        },  
    messages: { 
        surname : {
            required: 'Enter surname!' , 
            minlength: 'Surname should be longer!', 
        }, 
        question1: {
            required: 'Enter your opinion.', 
            minlength: 'Your opinion should be longer', 
        }, 
        question2: { 
            required: 'Please choose radio button.', 
        }, 
        question3: { 
            required: 'Please choose radio button', 
        }, 
    },

    };
});
 });

1 个答案:

答案 0 :(得分:1)

试试这个......

errorPlacement:function(error, element)
        {
            if($(element).attr("name")=="question2")
            {
                $(element).parent().append(error);
            }else
            {
            $(error).insertAfter(element);
            }   
        },