0

現在、2つの.jspページといくつかのjQuery検証に関する検証の問題が発生しています。

要するに問題：私は私のページに選択要素のセットを持っています。空のフィールドはありません。ただし、フォームを送信する場合、フィールドは無効としてマークされます。jQueryコードはファイルsearchbox.jspにあり、実際のフォームはファイルsearchform.jspにあります。Searchformはsearchboxファイルに含まれるようになります。

検証コードスニペットは次のとおりです。

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フィールドにのみ適用されます。

値がない場合（つまり、挿入されたリストがオプションタグで空の場合）、すべてが正常に機能します。検証は、その時点で通常の入力フィールドにあるフィールドで正常に機能します。

この問題は、リストが空でない場合に発生するため、選択できるオプションが少なくとも1つまたは複数ある場合に発生します。フォームスニペットでわかるように、実際にオプションがある場合、入力フィールドは選択フィールドになります。その場合、フィールドが空でなく、値のサイズが2より大きい場合でも、フォームは検証に合格しません。

これは本当に私を困惑させます。私は選択したフィールドの既知の問題をグーグルで探していました、私はこのフォーラムでかなりの数の投稿を見ました、しかし提案された解決策のどれもうまくいかないでしょう（私は認めなければなりません、いくつかは本当に何に合わないように見えるので私はそれらすべてを試していませんが欲しいです）。

何かご意見は？

前もって感謝します。

4

1 に答える 1

0

編集2：

minlength要素に適用したときにルールが何を意味するのかを誤解しているのではないかと思いましたselect。

見積もりOP：

...入力フィールドは選択フィールドになります。その場合、フィールドが空でなく、値のサイズが2より大きい場合でも、フォームは検証に合格しません。

「サイズが2より大きい」 〜「2つのアイテムを選択する」または「値に「2つ以上の文字」が含まれる」という意味ですか？

selectリストでは、minlength: 2ルールは、ユーザーがリストから2つのアイテムを選択する必要があることを意味します。selectこれが希望どおりでない場合は、リストでこの特定のルールを使用することはできません。それ以外の場合は、行の下の元の投稿を読んでください...

HTMLは最終的にブラウザでレンダリングされるため表示されていないため、selectリストがどのように作成されているかvalue、要素の属性にoption意味があるかどうか、またはそのname属性がルールに一致するかどうかはわかりません。

これは、属性を使用してselectリストを検証する方法を示す実用的なデモ/例です。とその子要素multipleのHTMLに注意してください。属性がどのように入力されているかに注目してください。最初の属性にはが含まれています。selectoptionvalueoptionvalue=""

動作中のデモ：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 に答える