Jquery步驟嚮導選擇列表驗證

Question

我正在使用名爲steps的jQuery插件來創建表單嚮導。 可在結合的jQuery插件validation中使用。

我需要能夠在用戶進行到下一組選項之前驗證選擇列表，但我還沒有找到一種方法，這樣做還。

繼承人我的代碼到目前爲止。該HTML

<h2>Engagement</h2> 
    <div id = "pane1"> 
     <div class = "panel panel-default"> 
     <div class = "panel-heading"> 
      Engagement 
      </div> 
      <div class = "panel-body"> 
       <table class='table table-hover'> 
       <tr valign='top'><td class='tableLabel'>Request Type:</td><td><select onchange = "getType();" id = "type" class="selectpicker required" name='type'> 
<?php 
foreach($types AS $key => $val){ 
    echo "<option value='{$key}'>{$val}</option>"; 
    } 
?> 
</select></td></tr> 
<tr valign='top'><td class='tableLabel'>Delivery Date:</td><td><input id='deliveryDate' placeholder="Select a delivery date for your request" class="form-control datePicker required" type='text' name='devlireyDate'></td></tr> 
</table> 
</div> 
</div> 
</div> 


      <h2>Details</h2> 

      <div id = "pane2"> 

      </div> 
     </form> 

jQuery的

$(function(){ 
    $("#engagementForm").steps({ 
    headerTag: "h2", 
    bodyTag: "div", 
    transitionEffect: "slideLeft", 
    onStepChanging: function (event, currentIndex, newIndex) 
    { 
    // Always allow going backward even if the current step contains invalid fields! 
    if (currentIndex > newIndex) 
    { 
     return true; 
    } 



    var form = $(this); 

    // Clean up if user went backward before 
    if (currentIndex < newIndex) 
    { 
     // To remove error styles 
     $(".body:eq(" + newIndex + ") label.error", form).remove(); 
     $(".body:eq(" + newIndex + ") .error", form).removeClass("error"); 
    } 

    // Disable validation on fields that are disabled or hidden. 
    form.validate().settings.ignore = ":disabled,:hidden"; 

    // Start validation; Prevent going forward if false 
       return form.valid(); 
      }, 
      onFinishing: function (event, currentIndex) 
      { 
       var form = $(this); 

       // Disable validation on fields that are disabled. 
       // At this point it's recommended to do an overall check (mean ignoring only disabled fields) 
       form.validate().settings.ignore = ":disabled"; 

       // Start validation; Prevent form submission if false 
       return form.valid(); 
      }, 
      onFinished: function (event, currentIndex) 
      { 
       var form = $(this); 

       // Submit form input 
       form.submit(); 
      } 
     }); 

       $('.selectpicker').selectpicker(); 
       $(".datePicker").datepicker({ dateFormat: 'yy-mm-dd' , minDate: "+1d" }); 
      }); 

交貨日期由puttint「要求」作爲一類簡單的驗證，但這不會爲選擇列表工作黯然。

Answer 1

一個解決方法是將選擇的值保存到隱藏的輸入並驗證隱藏的輸入。沒有測試，但應該工作。

$(document).ready(function(){ 
    $('#hidden_input').val(''); 
    form.validate({ 
     ignore: [], //make hidden works with jQuery validation and not ignore any hidden field 
     rules: { 
      hidden_input: required 
     }, 
     messages: { ... } 
     showErrors: function (errorMap, errorList) { 
      $.each(this.successList, function (index, value) { 

       if (value.id == "hidden_input"){ 
        $('#select').tooltip('destroy');    
       }else{ 
        $('#'+value.id+'').tooltip('destroy'); 
       } 
      }); 

      $.each(errorList, function (index, value) { 
       if (value.id == "hidden_input"){ 
        $('#select').attr('title',value.message).tooltip({ 
         placement: 'left', 
         trigger: 'manual' 
        }).tooltip('show');     
       }else{ 
        $('#'+value.element.id).attr('title',value.message).tooltip({ 
         placement: 'left', 
         trigger: 'manual' 
        }).tooltip('show');     
       } 
     } 
    }); 

    //define your jQuery steps here 
    form.steps({ ... }); 

    //save value to hidden field on change of select 
    $('#select').on('change', function(){ 
     $("#hidden_input").val($("#select").val()); 
    }); 
});