I have a form that sends information to another web page to perform an operation on a DB, but I am trying to first validate the form so that it does not send empty fields to the DB, I already have the validation but I have not been able to do so first Validate and if there are no empty fields, send the information to the DB, since it currently sends even when the validation is present, but it is because I have a js that has a click event where the form is processed through ajax to the other page and I don't know how to do to first validate and then process, doing tests, comment on the click function and it is already valid, maybe I have to occupy another event but I don't know which one?, this is my code:
$('#btnGuarda').click(function () {
var cargando = $("#carga").html("<center><img class='img-responsive' src='../imagenes/loading.gif'/><center>");
$.ajax({
type: 'POST',
url: '../statussol/procesaConfirmada.vbhtml',
data: $('#enviaConfirmada').serialize(),
beforeSend: function () {
$("#muestraFormulario").hide();
cargando.show().fadeIn();
},
success: function (e) {
cargando.hide();
$('#resultado').hide().html("<blockquote style='background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px;'> <p></p><p style='color:green'><i class='glyphicon glyphicon-ok-circle'></i> ¡ Operación exitosa !</p><p></p> </blockquote>").fadeIn(500);
$('#resultado').html(e);
}
});
});
/* VALIDACION A MI INPUT DEL FOMULARIO*/
$('#enviaConfirmada').bootstrapValidator({
message: 'Este valor no es valido',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txtVendedor: {
validators: {
notEmpty: {
message: 'El # de vendedor es requerido'
}
}
}
}
});
});
my form
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/bootstrapValidator.min.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="../js/scriptsConfirma.js"></script>
<script src="../js/validate.js"></script>
</head>
<body>
<!-- div muestra formulario -->
<div id="muestraFormulario">
<!-- formulario -->
<div class="alert alert-info" role="alert"><i class="glyphicon glyphicon-asterisk"></i> Ingrese número</div>
<form id="enviaConfirmada" name="enviaConfirmada" method="post" action="" class="form-horizontal">
<div class="form-group">
<label for="lblSolicitud" class="control-label col-sm-3">N° de solicitud</label>
<div class='input-group col-sm-8'>
<span class="input-group-addon">
<span class="glyphicon glyphicon-info-sign"></span>
</span>
<input type='text' id="txtNumsolicitud" name="txtNumsolicitud" class="form-control" readonly="readonly" />
</div>
<label for="lblSolicitud" class="control-label col-sm-1"></label>
</div>
<div class="form-group">
<label for="lblFecha" class="control-label col-sm-3">Fecha</label>
<div class='input-group col-sm-8'>
<span class="input-group-addon">
<span class="glyphicon glyphicon-info-sign"></span>
</span>
<input type='text' id="txtFecha" name="txtfecha" class="form-control" readonly="readonly" />
</div>
<label for="lblFecha" class="control-label col-sm-1"></label>
</div>
<label class="col-md-3 control-label">N° de vendedor</label>
<div class="col-md-7">
<input type='text' id="txtVendedor" name="txtVendedor" maxlength="4" onkeypress="ponerMayusculas(this);" class="form-control" />
</div>
<div class="form-group">
<label class="control-label col-sm-9"></label>
<div class="col-sm-3">
<button type="button" class="btn btn-success" id="btnGuarda">Guardar</button>
</div>
</div>
</form>
<!-- fin formulario -->
</div>
<!-- div muestra formulario -->
<div id="carga"></div>
<div id="resultado"></div>
</body>
</html>
You try to put all of your the required
inputs
attribute .Example:
You can also validate blank fields before serializing the form and submitting it via ajax:
You can try using jquery.validate.js
No. You don't have a form that submits information... and that's the real problem with the code: the form is never submitted and thus never gets validated .
The validation plugin checks when the form has been submitted, that is, when the event
submit
is fired. And that never happens because you are using a button of typebutton
, so the form is not submitted anywhere, instead a function is called that reads the data from the form and submits it via AJAX (without doing submit ).Two possible solutions to the problem:
1. Make the form submit
To do this, what you must do is the following:
Change the button from
type="button"
totype="submit"
. This way the form will be submitted when you press it.Change the click handler and make it a separate function.
Change the on
action
the form to point to the function in point 2.Now that it's like this, when you click the button, yes the form will be submitted, but first the validation of the jQuery plugin will happen and only if it is validated will the new function you created in step 2 be called.
2. Delegate shipping to the plugin
If you go to the plugin documentation, you can see that there are several examples showing how to do what you want. To do this, what you would have to do is add another controller when you create the bootstrapValidator.
It would be something like this (I haven't checked it, it may contain errors):
Source: http://bv.doc.javake.cn/examples/
For the label element to be associated with the input, the name of the for attribute must match the id attribute of the input, not the name
as an example the following:
See how the label for="name" is related to the input type="text" id="name" tag through the id "name"