0

我目前有一个关于 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。

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

有什么想法吗？

提前致谢。

4

1 回答 1

0

编辑2：

我突然想到，您可能误解了将minlength规则应用于select元素时的含义。

引用操作：

...输入字段成为选择字段。然后表单没有通过验证，即使字段不为空并且值的大小大于 2。

“大小大于2” ~你的意思是'选择两个项目'还是值包含'超过两个字符'？

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

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

这是一个工作演示/示例，展示了如何使用属性验证select列表。multiple注意 theselect及其子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/

于 2013-03-07T17:33:48.170 回答