驗證多個模態。以前的數據驗證

Question

我試圖驗證模態中的多個表單，但是當我驗證第一個時，其餘的模態保留了以前的驗證數據。 這是我的html。

<form class="form-horizontal" role="form" id="modal_user"> 
       <div class="form-group"> 
       <label class="control-label" for="inputEmail3">Nombre</label> 
         <div class="input-icon right"> 
          <i class="fa"></i>      
          <input type="text" class="form-control" id="input_first_name" name="input_first_name" value="" required/> 
         </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label" for="inputEmail3">Apellido</label> 
         <div class="input-icon right"> 
          <i class="fa"></i> 
          <input type="text" class="form-control " id="input_last_name" name="input_last_name" value="" required/> 
         </div> 
       </div> 
       <div class="form-group"> 
       <label class="control-label" for="inputEmail3">E-mail</label> 
        <div class="input-icon right"> 
           <i class="fa"></i> 
           <input type="email" class="form-control" id="input_username" name="input_username" value="" /> 
        </div> 
       </div> 
       <label class="control-label">Seleccionar Permisos</label> 
       <br> 
       <select class="form-control" id="pid" name="PermisosModal" class="required"> 
        {% for roles in permiso %} 
         <option data-permisos-id="{{ roles }}" value="{{roles}}">{{roles}}</option> 
         {%endfor%} 
        </select> 
        <div class="modal-footer"> 
        <input type="button" value="remove rules" id="hue"> 
         <input type="button pull-left" class="btn btn-primary saveModal" id="uids" value="Guardar Cambios " disabled="disabled"> 
         <button type="button pull-left" class="btn btn-default" data-dismiss="modal"> Cerrar </button> 
         <input type="text" id="recuperar" style="display:none"> 
         <button style="display:None;" class="btn btn-primary pull-right" data-toggle="tooltip" data-placement="right" title="El usuario recibirá en su correo un link para recuperar la clave"><i class="fa fa-envelope-o"></i> Recuperar Password</button> 
        </div> 
      </form> 

這是我的Javascript。

var um = $('#modal_user'); 

um.validate({ 
     rules: { 
    email: { 
    required: !0 
    }, 
    input_username: { 
    required: !0 
    }, 
    input_first_name: { 
    required: !0 
    }, 
}, 
errorPlacement: function(u, r) { 
     var i = $(r).parent(".input-icon").children("i"); 
     i.removeClass("fa-check").addClass("fa-warning"), i.attr("data-original-title", u.text()).tooltip({ 
      container: "body" 
     }) 
    }, 
    highlight: function(u) { 

     $(u).closest(".form-group").removeClass("has-success").addClass("has-error") 
    }, 
    unhighlight: function(u) {}, 
    success: function(u, r) { 
     var i = $(r).parent(".input-icon").children("i"); 
     $(r).closest(".form-group").removeClass("has-error").addClass("has-success"), i.removeClass("fa-warning").addClass("fa-check") 
    }, 
    submitHandler: function(u) { 
     i.show(), r.hide(), u[0].submit() 
    }, 

我已經嘗試在每個模式中放一個按鈕（僅用於測試），但它不起作用。

$('#hue').click(function (e) { 
    e.preventDefault(); 
    var formID = $(this).closest('form').attr('id'); 
    console.log(formID) 
    var form = $('#'+ formID); 
    console.log(form) 
    if (form.valid()){ 
     form.validate().resetForm(); 
    } 
}); 

Answer 1

我只是改變了存儲我的形式在一個變量的方式，很奇怪。

$('#myModalHorizontal').on('shown.bs.modal', function(){ 
    var form = $('#modal_user');   
    if (form.valid()){   
    form.validate().resetForm(); 
    console.log("reset form") 
    } 
});