jQuery Validate Error Messages for Conditional Required and for Groups

Question

jQuery Validate Error Messages for Conditional Required and for Groups

I've been struggling trying to get custom error messages to display properly in 3 different situations when using the jQuery Validate Plug-in.

Where I have a Group and only 1 member of the Group is required.
Custom messages for check box fields.
Displaying an error message when a field is conditionally required.

I've made note of this post: How to show different error messages based on various conditions. Is it perhaps part of the solution to my issues? I've also looked at Custom error messages for Groups within the jQuery Validation plugin, but it doesn't seem to address the issue of only 1 member of the Group being required and didn't solve my problem.

I'm new to jQuery and fiddles and have a fiddle up which isn't working properly. I suspect its because I don't have links to the graphics used in the CSS which came from the Milk and Marketo examples in the validation plug-in package. The fiddle is at http://jsfiddle.net/cloudmech/myvmb95d/23/.

Here's the code I'm using.

The JQuery:

$(document).ready(function() {
    $('#00NU00000049YHZ').change(function(){
       var checked = $(this).is(':checked');
       $('#company_information').toggle(checked);
       $('#company').prop('disabled', !checked)
   }).change();

    var $CompHdwDon = $('#00NU00000049YHj'),
    $SchedPickup = $('#00NU00000049YHt');

    $('#w2lForm').validate({
        debug: true,
        rules:{
            company: {
                depends: function(element) {
                    var checked = $('#00NU00000049YHZ').is(':checked');
                    return (checked);
                minlength: 3
                    }
                },             
            phone: {
                require_from_group: [1, '.phone_group'],
                phoneUS: true,
            },
            Mobile: {
                require_from_group: [1, '.phone_group'],
                phoneUS: true,
            },
            CompHdwDon: {
                required: checked=true
            },              
            SchedPickup: {
                required: checked=true
            },      
        },
        messages: {
            company: {
                depends: function(element) {
                    var checked = $('#00NU00000049YHZ').is(':checked');
                    return (checked);
                required: "Please provide the name of your company"
                }
            },
            phone_group: {
                required: "Either your regular or mobile phone is required"
            },
            phone: {
                required: "Either your regular or mobile phone is required"
            },
            Mobile: {
                required: "Either your regular or mobile phone is required"
            },
            CompHdwDon: {
                required: "This box must be checked for us to pick up a donation"
            },      
            SchedPickup: {
                required: "This box must be checked to schedule a donation pickup"
            },      
        },  
        // the errorPlacement has to take the table layout into account
        errorPlacement: function(error, element) {
            var n = element.attr("name");
            if (n == "phone" || n == "Mobile")
                error.appendTo(element.parent().next());
            else if (element.is(":radio"))
                error.appendTo(element.parent().next().next());
            else if (element.is(':checkbox'))
                error.appendTo(element.parent().next());
            else 
                error.appendTo(element.parent().next());
        },
        // set this class to error-labels to indicate valid fields
        success: function(label) {
            // set &nbsp; as text for IE
            label.html("&nbsp;").addClass("checked");
        },
        highlight: function(element, errorClass) {
            $(element).parent().next().find("." + errorClass).removeClass("checked");
        }
        // specifying a submitHandler prevents the default submit, good for the demo
    });

});

归档时间：	11 年，2 月前
查看次数：	5071 次
最近记录：	11 年，2 月前