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")
  }
});

验证多个模态。以前的数据验证

1 个答案: