我有一个将信息发送到另一个网页以对数据库执行操作的表单,但我试图首先验证表单,以便它不会将空字段发送到数据库,我已经进行了验证,但我无法这样做首先验证,如果没有空字段将信息发送到数据库,因为即使存在验证,它当前也会发送,但这是因为我有一个 js,它有一个点击事件,表单通过 ajax 处理到另一个页面,我不知道如何先验证然后处理,做测试,评论点击功能,它已经有效,也许我必须占用另一个事件但我不知道哪个?,这个是我的代码:
$('#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'
}
}
}
}
});
});
我的表格
<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>
你试着把你需要
inputs
的所有属性。例子:
您还可以在序列化表单并通过 ajax 提交之前验证空白字段:
您可以尝试使用jquery.validate.js
不。您没有提交信息的表单......这是代码的真正问题:表单从未提交,因此从未得到验证。
验证插件检查表单何时提交,即事件何时
submit
触发。这永远不会发生,因为您使用的是 type 按钮button
,因此表单不会在任何地方提交,而是调用一个函数从表单中读取数据并通过 AJAX 提交(没有submit)。该问题的两种可能解决方案:
1. 使表单提交
为此,您必须执行以下操作:
将按钮从 更改
type="button"
为type="submit"
。这样,当您按下它时,表单将被提交。更改点击处理程序并使其成为一个单独的函数。
将表单上的 更改
action
为指向第 2 点中的函数。现在是这样了,当您单击按钮时,是的,表单将被提交,但首先会发生 jQuery 插件的验证,只有通过验证,您在步骤 2 中创建的新函数才会被调用。
2. 将运输委托给插件
如果你去插件文档,你可以看到有几个例子展示了如何做你想做的事。为此,您必须在创建 bootstrapValidator 时添加另一个控制器。
它会是这样的(我没有检查过,它可能包含错误):
来源:http ://bv.doc.javake.cn/examples/
对于要与输入关联的标签元素,for 属性的名称必须与输入的 id 属性匹配,而不是名称
例如以下:
通过id "name"查看标签 for="name"标签与输入 type="text" id="name"标签的关系