jquery.validate를 사용하여 제출 된 양식의 유효성 확인 양식 사용에 따라

Question

현재 양식에 두 가지 양식, 업데이트 양식 및 추가 양식이 있습니다. 두 양식 중 하나를 제출할 때 이드의 ID를 가져와야합니다. 해당 양식은 작업과 함께 특정 양식의 유효성을 검사 한 다음 웹 서버에서 반환합니다.

구체적으로 각 양식의 ID를 사용하여 작업하게 만들었지 만 js 코드가 두 번 반복됩니다. id는 좀 더 동적 인 것을 선호합니다.

<script src="assets/js/jquery-1.8.2.js"></script> 
<script src="assets/js/bootstrap.js"></script> 
<script src="assets/js/jquery.validate.js"></script> 


<div id="myTabContent" class="tab-content"> 
     <div class="tab-pane active" id="update">     
      <form action="php/update_level.php" method="post" id="form1"> 
       <h2>Update Level</h2> 
       <label>Select Bag Level</label> 
       <select id="target" name="levelSelect"> <option selected>Select</option> 
        <?php 
        foreach($result as $row) 
        {?> 
         <option><?php echo $row['Level'] ?></option> 
        <?php 
        } 
        ?> 
       </select> 
       <div id="upForm"> 
       </div> 
       <div class="message"> 

       </div> 
      </form> 
     </div> 
     <div class="tab-pane" id="addNew">     
      <form action="php/add_level.php" id="form2"> 
       <h2>New Level</h2>  
       <label>Level</label> 
       <input class="required" maxlength="10" minlenght="1" type="text" name="level" placeholder="Level"> 
       <label>Description</label> 
       <textarea class="required" name="description" rows="3" placeholder="Description of level type"></textarea> 
       </br> 
       <div class="message"> 

       </div> 
       <div class="form-actions"> 
       <button id="inFormSub" type="submit" class="btn btn-large btn-primary">Submit</button> 
       </div> 
      </form>     
     </div> 
    </div> 

JS :

$('form').submit(function(e){ 
e.preventDefault(); 
var id=$(this).attr('id'); 
var action=$(this).attr('action'); 

console.log(action + ' ' + id); //works outputs update_bag.php form1 on submit of form1 
           //add_bag.php form2 on submit of form2 
$(id).validate({ 
    submitHandler: function() { 


     console.log(action + ' ' + id); //doesnt work 
     $(id).find('div.message').load(action, $(id).serializeArray());    
    } 
}); 

JS

$('#form1').validate({ 
    submitHandler: function() { 
     var action = $('#form1').attr('action'); 

     console.log(action + ' validate1'); 
     $('#form2').find('div.message').load(action, $('#form1').serializeArray());    
    } 
});  

$('#form2').validate({ 

    submitHandler: function() { 
     var action = $('#form2').attr('action'); 

     console.log(action + ' validate2'); 
     $('#form2').find('div.message').load(action, $('#form2').serializeArray());    
    } 
}); 

작동

JS와 jQuery를 내 지식은 가장 작고, 메신저 아마 바로 얼굴에 솔루션을 응시

Answer 1

요소 당 특정 데이터가 필요한 플러그인을 적용하는 일반적인 방법은 each()을 사용하여 요소를 반복하는 것입니다. 따라서 루프 내에서 this에 액세스하여 코드를 복제하지 않고도 개별 양식 요소에 쉽게 액세스 할 수 있습니다 각각

$('#form1,#form2').each(function() { 
    var $form = $(this); 
    var action = $form.attr('action'); 
    $form.validate({ 
     submitHandler: function() {   
      $form.find('div.message').load(action, $form.serializeArray()); 
     } 
    }); 
}); 

Answer 2

submitHandler에서 양식 변수를 사용하여 ID와 액션을 얻을 수 있습니다.

... 
submitHandler: function(form){ 

    console.log($(form).attr('id'), $(form).attr('action'));  

    ... 
} 

Answer 3

는 $(this).attr("id") 전화는 요소의 ID를 반환하지만 그건 PROPPER CSS를 선택하지 않습니다, 그래서 당신은 해시 개봉 자기

시도에 서명을 추가하고 호출 변경해야

을

$("#"+id).validate({ 
    //validate code here 
})