2

stepsという jQuery プラグインを使用してフォーム ウィザードを作成しています。これは、jQuery検証プラグインと組み合わせて使用​​できます。

ユーザーが次のオプションのセットに進む前に、選択リストを検証できるようにする必要がありますが、まだその方法を見つけていません。

これまでのところ、私のコードはここにあります。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" });
            });

配送日は、クラスとして「必須」と入力するだけで検証されますが、悲しいことに、これは選択リストでは機能しません。

4

1 に答える 1

0

1 つの回避策は、select on change の値を非表示の入力に保存し、非表示の入力を検証することです。テストされていませんが、動作するはずです。

$(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());
    });
});
于 2015-10-30T17:13:12.907 に答える