Placing error message for a checkbox array

前端 未结 2 2057
臣服心动
臣服心动 2020-11-30 12:54

I am using the Validation Plugin for jQuery and it works wonders. Except when I have a group of checkboxes...the error messages will display right after the first checkbox..

相关标签:
2条回答
  • 2020-11-30 13:42

    Why not use a custom validation method ? Something like this:

    jQuery:

    // The custom validation method, returns FALSE (invalid) if there are
    // no checkboxes (with a .one_required class) checked
    $.validator.addMethod("one_required", function() {
        return $("#myform").find(".one_required:checked").length > 0;
    }, 'Please select at least one vehicle.');
    
    $("#myform").validate({
        // Use the built-in errorPlacement function to place the error message
        // outside the table holding the checkboxes if they are the ones that
        // didn't validate, otherwise use the default placement.
        errorPlacement: function(error, element) {
            if ($(element).hasClass("one_required")) {
                error.insertAfter($(element).closest("table"));
            } else {
                error.insertAfter(element);
            }
        }
    });
    

    HTML:

    <form id="myform">
        <!-- table, rows, etc -->
        <td align="center"><input type="checkbox" class="one_required" name="selectItems[]" value="NA245852" /></td>
        <td>NA245852</td>
        <!-- more rows, end table, etc -->
        <br/>
        <input type="submit" value="Go, baby !">
    </form>
    

    Since the jQuery Validate plugin can also validate an element if the method name is present as a class, simply output the .one_required class on all checkboxes.

    See a working demo on JSFiddle with multiple checkboxes.

    EDIT:

    Here's your own code with the above solution implemented.

    Hope this helps !

    0 讨论(0)
  • 2020-11-30 13:47

    You can use errorLabelContainer configuration option.. define a div with an id like errorMessages and then change your validate method call as follows:

    $("form").validate({
       errorLabelContainer: $("#errorMessages"),
         rules: ..... your rules
    

    Now all the error messages will be displayed in the div. Edit: Updated the answer below to reflect the updates to the question: To change the location of error messages displayed, I can think of using the errorPlacement config parameter. You can use something like: Define a div or a p and keep appending the messages for the checkboxes to this element.

    $("form").validate({
    errorPlacement:function(error,element) {
        if (element.attr("name") == "selectItems") {
            //Add Code to append the error message to a predefined element
            $("#errorDiv").html("");
            $("#errorDiv").append("<YOUR_CUSTOM_MESSAGE>");
        } else { 
            error.insertAfter(element);
        }
      },
      rules: ..... your rules
    });
    

    jsFiddle URL: http://jsfiddle.net/Z8hWg/28/

    EDIT: Change your javascript to as follows:

    <script type="text/javascript">
        $(document).ready(function(){        
                    var formValidator = {};
                    $("#Date").datepicker();       
                    formValidator = $("#form1").validate({
                            errorPlacement:function(error,element) {
                                    if (element.attr("name") == "selectedItems") {
                                                    //Add Code to append the error message to a predefined element
                                            $("#errorDiv").html("Select at least one vehicle");
                                    } else {
                                            error.insertAfter(element);
                                    }
                            },
    
                            rules: {
                                    avgTime:{
                                            required:true,
                                            number:true
                                    },
    
                                    selectedItems:
                                    {
                                            required:true
                                    },
                                    Date:{
                                            required:true,
                                            date:true
                                    }
    
                            },    
                            //onclick: true,
                            submitHandler: function(form) {
                                    $("#errorDiv").html("");
                                    form.submit();
                            }
    
                    });       
                    $("input[name=selectedItems]").bind("change", function() {
                            var me = $(this);
                            var scoper = me.parent().parent();
                            var otherInputs = $("input[name^=mileage]", scoper);
                            otherInputs.attr("disabled", !this.checked);
                            otherInputs.attr("value","");
                            if (this.checked)
                            {
                                    otherInputs.addClass('required number');
                                    $("#errorDiv").html("");
                            }
                            else
                            {
                                    otherInputs.removeClass("required number");
                            }
                            formValidator.element("input[name=selectedItems]");
                    });
    
    
            });  
    </script>
    
    0 讨论(0)
提交回复
热议问题