JQuery验证错误消息不合适

时间:2014-01-04 09:53:27

标签: javascript jquery html validation checkbox

我有一个使用Jquery Validate验证的表单。表单包含两个名称相同的复选框,其中至少一个必须选中。为此,我在复选框名称上使用.validate()以及规则:required“。

虽然我能够成功验证,(即没有选中复选框时弹出错误消息),但在第一个复选框后显示错误消息,这会破坏我的格式。

我目前正在使用errorElement和errorPlacement使错误消息显示在每个输入元素后面的一对span标记中,但它似乎不适用于复选框。

HTML(提取):

<form id='BizAddItem' name='BizAddItem' method='post' action='additemprocess.php' enctype='multipart/form-data' novalidate='novalidate'>

        //More input elements above

        <div class='BizAddItemDetails'>
            <label for='BizFulfilment'>Order Fulfilment:</label>
            <input type='checkbox' id='BizFulfilment' name='BizFulfilment[]'>Delivery &nbsp
            <input type='checkbox' id='BizFulfilment' name='BizFulfilment[]'>In-Store Pickup
            <span></span>
        </div>
        //More input elements below

</form>

jQuery代码(Extract):

$('#BizAddItem').validate({

    errorElement:"span",
    errorPlacement:function(error,element){

        error.insertAfter(element);

    },

    rules:{

        //More items above

        'BizFulfilment[]':{

            required:true
        },

    },

    messages:{

        //More items above

        'BizFulfilment[]':{

            required:"Please select at least one option"
        },
    },

        submitHandler:function(form){

        form.submit();

        }

})

任何提供的帮助将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:1)

试试这个......

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