Question

在验证表单时，它正常工作但

首先为Description发送消息，然后为Code然后为Name发送消息。但我希望首先针对Name进行验证，然后针对Code进行验证，然后针对Description进行验证

$(document).ready(function() {
    $("#added").validate({
        rules: {
            Name: {
                required: true
            },
            Code: {
                required: true
            },
            Description: {
                required: true
            },

        },

        messages: {
            Name: {
                required: "Enter Name"
            },
            Code: {
                required: "Enter code"
            },

            Description: {
                required: "Enter Description"
            },
        },

        errorPlacement: function(error, element) {
            $("#error-messages").html(error); // error container
        }
    });
});

HTML：

<div id="error-messages"></div>
<s:form action="added" id="added" method="post" >
   <s:textfield name="Name" id="Name" label="Name" labelposition="top" />
   <s:textarea name="Code" id="Code" rows="10" cols="50" 
                 label="Code" labelposition="top"/>

   <s:textarea name="Description" id="Description" rows="5" cols="50"
                 label="Description" labelposition="top"/>
<s:form>

如何解决这个问题？

Answer 1

jQuery validation plugin按DOM的顺序检索元素（参见$.validator.prototype.elements函数，l.461）。

因此，从最后到第一个元素验证的解决方案是在我们自己的脚本部分中使用此代码修补此函数：

$.validator.prototype.elements = function() {
    var validator = this,
        rulesCache = {};

    // select all valid inputs inside the form (no submit or reset buttons)
    return 
        $(  // Added this in order to re-encapsulate in a jQuery object the reversed array (see below)
        $(this.currentForm)
        .find("input, select, textarea")
        .not(":submit, :reset, :image, [disabled]")
        .not( this.settings.ignore )
        .filter(function() {
            if ( !this.name && validator.settings.debug && window.console ) {
                console.error( "%o has no name assigned", this);
            }

            // select only the first element for each name, and only those with rules specified
            if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) {
                return false;
            }

            rulesCache[this.name] = true;
            return true;
        })
        .get().reverse()  // Added this in order to reverse the array order
    );
}

显示最后一个元素的错误

1 个答案: