2017-11-30 2 views
0

템플릿 마법사 양식 플러그인을 사용하고 있습니다.템플릿 마법사에서 선택 클래스에서 작동하지 않는 필수 클래스

select는 옵션 값을 동적으로 페이지로드 이벤트에 추가합니다. I (0), 모든 기본 검증

모든 텍스트 상자에 모든 값을 작성하고 선택의 기본을 유지하지 않고 다음 버튼을 클릭하면 내가 select에 필요한 클래스를 추가 한 "이 feild에 필요합니다."

이 플러그인의 모든 텍스트 상자 상단에 표시되지만 select (카테고리 필드)에서는 작동하지 않습니다.

도와주세요!

HTML JQuery와에

<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> 

$("#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/을 사용하고 있습니다. 예제 # vertical plugins – Nida

답변

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

선택 첫 번째 옵션 새로운 코드

<option value="">Select</option> 
을 가치에서 제거
+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> 
관련 문제