Question

我有一个带有下拉列表的表单。根据下拉列表中的选择，我应该隐藏几个输入字段。当我执行验证时，我不应该为隐藏字段执行此操作。我为此编写了一个冗长的代码，工作正常。但我相信有更好的方法可以做到这一点。如果有的话请告诉我。

如果您从下拉列表中选择“A”，请从表单中隐藏“截止日期”，如果您选择“B”，则隐藏“远离任何人”，对于任何其他选择的选项隐藏“日期”和“离开时”。在所有情况下都需要输入字段 - “设备ID ”和“原因代码”。

工作守则：
jQuery的：

$('#lockForm select[name="Key"]').change(function () {
               var selectedOption = $('#lockForm select[name="Key"] option:selected').val();
                if (selectedOption == 'A' ) $('.datepicker,.ticket').hide();
                else $('.datepicker,.ticket').show();
                if (selectedOption == 'B' ) $('.awayWhse').hide();
                else $('.awayWhse').show();
                if (selectedOption == 'C' || selectedOption == 'D') $('.hidden').hide();
                else $('.hidden').show();
    });
$('#btnLock').click(function() {
         var selectedOption = $('#lockForm select[name="Key"] option:selected').val();
         if($.trim($('.deviceIdLock').val()) == ''){
            $('#area21').html("Device Id is a required field.");
         }else if($.trim($('.reasonCode').val()) == 'NONE'){
            $('#area21').html("Reason Code is a required field.");
         }else if (selectedOption == 'A' ){
             if($.trim($('.awayWhse1').val()) == 'NONE')    $('#area21').html("Away Warehouse is a required field.");
             else $('#lockForm').submit();
         }else if (selectedOption == 'B' ){
             if($.trim($('#datepicker').val()) == '')   $('#area21').html("Due date is a required field.");
             else $('#lockForm').submit();
         }else{
            $('#lockForm').submit();
         }
    });

HTML：

<form:form method="post" id="lockForm" modelAttribute="adminTransaction" action="/DeviceManager/admin/lock">
        <div align=center class="plErroMessage" id="area21">${serverError2}</div> 
        <div class="plSuccessMessage" id="area22">${serverSuccess2}</div> 
        <div>
            <div class="plLabelSearch">Device Id:</div> 
            <div class="plinput"><form:input path="deviceId" class="deviceIdLock" size="29"/></div>
        </div>
        <div>
            <div class="plLabelSearch">Reason Code:</div> 
                <div class="plselect">
            <form:select path="Key" class="reasonCode">
            <form:option value="NONE" label="------- Select One -------" />
            <form:options items="${reasonList}" itemValue="reasonCode" itemLabel="reasonDesc"/>
            </form:select>
                </div>
        </div>
        <div class="hidden" >
        <div class="awayWhse">
            <div class="plLabelSearch">Away Whse:</div> 
            <div class="plselect">
            <form:select path="awayWarehouse" class="awayWhse1">
            <form:option value="NONE" label="------- Select One -------" />
            <form:options items="${homeWhseList}" itemValue="warehouseCode" itemLabel="warehouseCode"/>
            </form:select>
            </div>
        </div>
        <div class="datepicker">
            <div class="plLabelSearch">Due Date:</div> 
            <div class="plinput"><form:input id="datepicker" path="dueDate" placeholder="yyyy-mm-dd"/></div>
        </div>
        </div>
        <div>
            <div class="plLabelSearch">&nbsp;</div>
            <div class="plinput"><a id="btnLock" class="abutton">Lock</a></div>
            <div class="plinput"><a id="btnCancel2" class="abutton">Cancel</a></div>
        </div>
    </form:form>

不要验证隐藏字段jQuery

0 个答案: