Question

我目前正在处理有关2 .jsp页面和一些jQuery验证的验证问题。

问题很简单：我的页面上有一组选择元素。没有字段是空的。但是，当我想提交表单时，字段被标记为无效。 jQuery代码位于文件searchbox.jsp中，实际表单位于searchform.jsp文件中。搜索表格包含在搜索框文件中。

这是验证码片段：

jQuery("#car-search").validate({
//      onkeyup: false,
        onfocusout: false,
    focusInvalid: false,
    focusCleanup: true,
    rules : {
        "pickupLocationName" : {
            required : true,
            fullLocation : true,
            minlength : 3
        },
        "pickupDate" : {
            required : true,
            minlength : 1
        },
        "pickupTimeHours": {
            required: true
        },
        "returnLocationName": {
            required: true,
            fullLocation : true,
            minlength: 3
        },
        "returnDate" : {
            required : true,
            minlength : 1
        },
        "returnTimeHours": {
            required: true
        },
        "driverFirstname": {
            required: true,
            minlength: 2
        },
        "driverLastname": {
            required: true,
            minlength: 2
        },
        "driverBirthdate": {
            required: true,
            minlength: 10,
            maxlength: 10,
            realDate: true
        }
    },
    messages : {
        "pickupLocationName" : "<spring:message code="car_search.pickup_location.required" />",
        "returnLocationName" : "<spring:message code="car_search.return_location.required" />",
        "pickupDate" : "<spring:message code="car_search.pickup_date.required" />",
        "returnDate" : "<spring:message code="car_search.return_date.required" />",
        "pickupTimeHours": "<spring:message code="car_search.pickup_time.required" />",
        "returnTimeHours": "<spring:message code="car_search.return_time.required" />",
        "driverFirstname": "<spring:message code="car_search.driver_firstname.required"/>",
        "driverLastname": "<spring:message code="car_search.driver_lastname.required"/>",
        "driverBirthdate": "<spring:message code="car_search.driver_birthdate.required"/>"
    },
    showErrors : function(errorMap, errorList) {
        if (!validationMessageIsShown) {
            jQuery(".invalidFormMessage #invalidFormItems").text("");
            this.defaultShowErrors();
            if(this.numberOfInvalids()>0){
                jQuery(".invalidFormMessage").jqmShow();
            }
            validationMessageIsShown = true;
        }
    },
    invalidHandler : function (form, validator) {
        validationMessageIsShown = false;
    },
    submitHandler: function(form) {
        showLoading();
        form.submit();
    },
    errorPlacement : function(error, element) {
        error.appendTo("#invalidFormItems");
    }
});

这段代码就是：

<form:form commandName="carSearchForm" method="post" action="${actionUrl}" id="car-search" cssClass="searchForm">
<fieldset>
    ...
        <div class="blueDottedBorder"></div>
        </div>
        <div class="usaStep step3">
        <h4><spring:message code="car_search.driver_section"/> <span class="normal"><spring:message code="car_search.driver_section_info"/></span></h4>
        <div class="clr">
            <form:label path="driverFirstname" cssClass="big"><spring:message code="car_search.driver_firstname"/></form:label>
            <c:choose>
                <c:when test="${empty adultFirstNames}">
                   <form:input path="driverFirstname" id="driverFirstname"/>
                </c:when>
                <c:otherwise>
                    <form:select path="driverFirstname" id="driverFirstname" >
                        <form:options items="${adultFirstNames}" />
                    </form:select>
                </c:otherwise>
            </c:choose>
        </div>
        <div class="clr">
            <form:label path="driverLastname" cssClass="big"><spring:message code="car_search.driver_lastname"/></form:label>
            <c:choose>
                <c:when test="${empty adultLastNames}">
                    <form:input path="driverLastname" id="driverLastname" />
                </c:when>
                <c:otherwise>
                    <form:select path="driverLastname" id="driverLastname" >
                        <form:options items="${adultLastNames}" />
                    </form:select>
                </c:otherwise>
            </c:choose>
        </div>
        <div class="clr">
            <form:label path="driverBirthdate" cssClass="big"><spring:message code="car_search.driver_birthdate"/></form:label>
            <c:choose>
                <c:when test="${empty adultBirthdays}">
                    <form:input path="driverBirthdate" size="10" maxlength="10" cssClass="birthdate" id="driverBirthdate" />
                </c:when>
                <c:otherwise>
                    <form:select path="driverBirthdate" items="${adultBirthdays}" id="driverBirthdate" >
                        <form:options items="${adultBirthdays}" />
                    </form:select>
                </c:otherwise>
            </c:choose>
        </div>
        <div class="info-msg" style="padding-left: 30px; margin-top: 30px;" id="extraPointCost"><spring:message code="car_search.warning_surcharge" /> <a href="<url:car-rental_drop-off-cost />" target="_blank" class="more"><spring:message code="car_search.warning_surcharge.link_label" /></a></div>
        </div>
        <div style="margin-top: 30px;"><a href="<url:car-rental_conditions />" target="_blank" class="more"><spring:message code="car_search.rental_conditions.link_label" /></a></div>

    </div>
    <input type="submit" class="submit" value="<spring:message code="car_search.submit"/> &raquo;"/>
</fieldset>
</form:form>

我已从表单中删除了不相关的字段。该问题仅适用于driverFirstname，driverLastname和driveBirthdate字段。

如果没有值（因此当选项标签中插入的列表为空时），一切正常。验证在当时常规输入字段的字段上正常工作。

当列表不为空时会出现问题，因此当至少有一个或多个选项可供选择时。正如您在表单片段中看到的那样，当实际存在选项时，输入字段将成为选择字段。然后，即使字段不为空且值的大小超过2，表单也不会通过验证。

这真让我困惑。我一直在搜索选定字段的已知问题，我在这个论坛上看到了相当多的帖子，但没有一个建议的解决方案工作或工作（我必须承认，我没有尝试过所有这些，因为有些似乎真的不适合什么我想要）。

任何想法？

提前感谢。

Answer 1

编辑2：

我刚刚想到您可能会误解minlength规则在应用于select元素时的含义。

引用OP：

...输入字段成为选择字段。然后表格就是这样即使字段不为空，也不通过验证 value的大小大于2。

“大小超过2”〜您的意思是“选择两个项目”或者值包含“两个以上的字符”？

在select列表中，minlength: 2规则表示用户必须从列表中选择两个项。如果这不是您想要的，那么您不能在select列表中使用此特定规则。否则，请阅读该行下面的原始帖子......

您尚未显示HTML，因为它最终会在浏览器中呈现，因此我不知道select列表是如何构建的，如果value元素上的option属性有意义，或者name属性是否符合您的规则。

这是一个有效的演示/示例，展示了如何使用select属性验证multiple列表。请注意select及其子option元素的HTML。请注意value属性的填写方式，第一个option包含value=""的位置。

工作演示：http://jsfiddle.net/seUre/

<强> HTML ：

<form id="myform">
    <select multiple="multiple" name="field1">
        <option value="">please choose</option>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>
    <select multiple="multiple" name="field2">
        <option value="">please choose</option>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
        <option value="5">five</option>
    </select>
    <input type="submit" />
</form>

<强>的jQuery ：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // your other options,
        rules: {
            field1: {
                required: true,
                minlength: 2
            },
            field2: {
                required: true,
                minlength: 3
            }
        },
        messages: {
            field1: {
                minlength: "please choose at least {0} items"
            },
            field2: {
                minlength: "please choose at least {0} items"
            }
        }
    });

});

修改：

设置了onfocusout: false,选项后，在之后首次点击提交按钮时，就没有验证消息：http://jsfiddle.net/seUre/1/

mvc选择标记上的错误验证

1 个答案: