tengo una consulta y es la siguiente:
Tengo un formulario dentro de un modal que es validado con JQuery Validate pero al momento de cerrar el modal y volver abrir el modal se queda con los estilos de validación puestos, y lo que deseo es que al abrir el modal aparezca mi formulario limpio.
Formulario
<div class="modal fade" id="modalNuevo" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="#" id="formPersona">
<input type="hidden" name="idPersona" id="idPersona" enctype="multipart/form-data"/>
<div class="form-group">
<label class="control-label col-sm-4" for="nombre">Nombre:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="nombre" name="nombre">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="apellidos">Apellidos:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="apellidos" name="apellidos">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="edad">Edad:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="edad" name="edad">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="telefono">Telefono:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="telefono" name="telefono">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnGuardar">Guardar</button>
<button type="button" class="btn btn-primary" id="btnActualizar">Actualizar</button>
<button type="button" class="btn btn-default" id="btnCerrar">Cerrar</button>
</div>
</div>
</div>
</div>
Archivo js
$("#btnNuevo").click(function () {
//Abre Modal de Registro
$("#modalNuevo").modal("show");
//Ocultar Boton Actualizar
$("#btnActualizar").hide();
//Mostrar Boton Guardar
$("#btnGuardar").show();
//Limpiar Cajas
$("#idPersona").val("");
$("#nombre").val("");
$("#apellidos").val("");
$("#edad").val("");
$("#telefono").val("");
//Habilitar Cajas
$("#nombre").prop("readonly", false);
$("#apellidos").prop("readonly", false);
$("#edad").prop("readonly", false);
$("#telefono").prop("readonly", false);
});
Validación
validar: function () {
var form1 = $("#formPersona");
form1.validate({
rules: {
nombre: "required",
apellidos: "required",
edad: {
required: true,
number: true
},
telefono: "required"
},
messages: {
nombre: "Por favor, ingrese su nombre",
apellidos: "Por favor, ingrese su nombre",
edad: {
required: "Por favor, ingrese su edad",
number: "Ingrese un número válido"
},
telefono: "Por favor, ingrese su telefono"
},
errorElement: "em",
errorPlacement: function (error, element) {
// Add the `help-block` class to the error element
error.addClass("help-block");
// Add `has-feedback` class to the parent div.form-group
// in order to add icons to inputs
element.parents(".col-sm-5").addClass("has-feedback");
if (element.prop("type") === "checkbox") {
error.insertAfter(element.parent("label"));
} else {
error.insertAfter(element);
}
// Add the span element, if doesn't exists, and apply the icon classes to it.
if (!element.next("span")[0]) {
$("<span class='glyphicon glyphicon-remove form-control-feedback'></span>").insertAfter(element);
}
},
success: function (label, element) {
// Add the span element, if doesn't exists, and apply the icon classes to it.
if (!$(element).next("span")[0]) {
$("<span class='glyphicon glyphicon-ok form-control-feedback'></span>").insertAfter($(element));
}
},
highlight: function (element, errorClass, validClass) {
$(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
$(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
$(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
}
}).form();
if (form1.valid()) {
persona.registrar();
}
},