對mvc選擇標記的錯誤驗證

Question

我目前有一個關於2 .jsp頁面和一些jQuery驗證的驗證問題。

問題簡而言之：我的頁面上有一組select元素。沒有一個字段是空的。但是，當我想提交表單時，這些字段被標記爲無效。 jQuery代碼位於文件searchbox.jsp中，實際的表單位於文件searchform.jsp中。 Searchform正在包含在搜索框文件中。

這裏是驗證代碼片段：

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：

它只是發生，我認爲你可能會被曲解當應用於select元素minlength規則意味着什麼。

報價OP：

...輸入字段成爲選擇字段。它是那麼的形式不 沒有通過驗證，即使字段不爲空和 值的大小大於2

「大小大於2」〜你的意思是'選擇兩個項目'或值包含'超過兩個字符'？

在select列表中，minlength: 2規則表示用戶必須從列表中選擇兩個項目。如果這不是您想要的，那麼您不能在select列表中使用此特定規則。否則，請閱讀下面的原始發佈...

---

您還沒有表現出你的HTML，因爲它是在瀏覽器中最終呈現的，所以我不知道如何被構建的select名單，如果在option元素value屬性任何意義，或者如果它name屬性符合您的規則。

這是一個工作演示/示例，顯示如何使用multiple屬性驗證select列表。請注意0​​及其子代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/