2017-11-30 13 views
0

テンプレートウィザードフォームプラグインを使用しています。テンプレートウィザードで選択したクラスで必須のクラスが動作しません

selectは、そのオプション値をページのロードイベントに動的に追加します。 私はselectに必要なクラスを追加している私は

、すべてのテキストボックス内の任意の値を充填し、(0)を選択し、デフォルトを維持することなく、すべてのデフォルトの検証を次のボタンをクリックすると、「このフェイルドが必要です。」

このプラグインは、すべてのテキストボックスの上部に表示されますが、select(カテゴリフィールド)では機能しません。

助けてください!

HTML

<form class="form-horizontal" id="form" onsubmit="return validateform()" method='post' action="./?action=savebookdetails" class="wizard-big"> 
    <h1>Book Details</h1> 
    <fieldset> 
     ... ... 
     <div class="form-group"> 
      <label class="col-sm-3 control-label">ISBN *</label> 
      <div class="col-sm-9"> 
       <input name="isbn" id="isbn" value="<?php if($result != '') echo $result->isbn; ?>" type="text" class="form-control only-numbers required" maxlength="11"> 
      </div> 
     </div> 
     <div class="form-group" id="dob"> 
      <label class="col-sm-3 control-label">Category *</label> 
      <div class="col-sm-9"> 
       <select class="form-control required" onchange="fetchsubcategories(this.value)" id="category" name="category"> 
        <option value="0">Select</option> 
       </select> 
      </div> 
     </div> 
    </fieldset> 
</form> 

jqueryので

$("#wizard").steps(); 
$("#form").steps({ 
    bodyTag: "fieldset", 
    onStepChanging: function(event, currentIndex, newIndex) { 
     if (currentIndex > newIndex) { 
      return true; 
     } 
     var form = $(this); 
     if (currentIndex < newIndex) { 
      $(".body:eq(" + newIndex + ") label.error", form).remove(); 
      $(".body:eq(" + newIndex + ") .error", form).removeClass("error"); 
     } 
     form.validate().settings.ignore = ":disabled,:hidden"; 
     return form.valid(); 
    }, 
    onStepChanged: function(event, currentIndex, priorIndex) { 
     if (currentIndex === 2 && priorIndex === 3) { 
      $(this).steps("previous"); 
     } 
    }, 
    onFinishing: function(event, currentIndex) { 
     var form = $(this); 
     form.validate().settings.ignore = ":disabled"; 
     return form.valid(); 
    }, 
    onFinished: function(event, currentIndex) { 
     var form = $(this); 
     form.submit(); 
    }, 
    onCanceled: function(event) { 
     window.history.go(-1); 
    } 
}).validate({ 
    errorPlacement: function(error, element) { 
     element.before(error); 
    } 
}); 
+0

使用しているプラ​​グイン?作業用のコードスニペットやフィドルを追加して不要なコードを取り除いたほうがよいでしょう。(質問に含まれていないphpとfetchsubcategories関数を参照してください) –

+0

私はhttp://www.jquery-steps.com/を使っています例#垂直プラグイン – Nida

答えて

0
<option value="0">Select</option> 

を選択し、最初のオプション 新しいコードの値から

<option value="">Select</option> 
を0を削除
+0

私はオプションとして ""を保持していますが、それでも動作しません – Nida

0

jquery.validaitonプラグインを使用しないフォーム検証。すべてのフィールドに同じクラス名を設定する必要があります。例えば

<input class="form-control amount validate_form" name="amount[]" type="text"> 
<p class="validateError" style="color:red;display:none;">please enter amount.</p> 
<button type="submit" id="fees_stream_submit" class="btn btn-primary">Submit</a> 

<script type="text/javascript"> 
    $(document).on('click', '#fees_stream_submit', function(e) { 
    e.preventDefault(); 
    $(".validate_form").each(function() { 
     var selectedTr = $(this); 
     i = 0; 
     var value = $(this).val(); 
     if (!value) { 
      selectedTr.next("p").show(); 
      i++; 
     } else { 
      selectedTr.next("p").hide(); 
     } 
    }); 

    if (i == 0) { 
     $('#fees_stream_form').submit(); 
    } 
}); 
</script> 
関連する問題