模态中的 jQuery 验证通过 php 发送数据
Posted
技术标签:
【中文标题】模态中的 jQuery 验证通过 php 发送数据【英文标题】：jQuery Validation in a Modal to send data via php 【发布时间】：2019-11-01 15:50:31 【问题描述】：我有一个问题，它让我发疯。我有一个使用 jquery 验证插件进行验证的表单，这很有效！但不会将数据发送到 php 以存储在数据库中。
我读了很多书，但没有什么能解决我的问题。
这是 JS：
$( "#add_cliente" ).validate(
rules:
nomb1_clie:
required: true,
lettersonly: true,
minlength: 2
,
nomb2_clie:
lettersonly: true,
minlength: 2
,
apel1_clie:
required: true,
lettersonly: true,
minlength: 2
,
apel2_clie:
lettersonly: true,
minlength: 2
,
usuar_clie:
required: true,
minlength: 2
,
contr_clie:
required: true,
minlength: 5
,
confirm_password:
required: true,
minlength: 5,
equalTo: "#contr_clie"
,
telef_clie:
required: true,
number: false,
minlength: 15
,
email_clie:
required: true,
email: true
,
,
messages:
nomb1_clie:
required: "Ingrese su Primer Nombre",
lettersonly: "Tu Nombre solo debe contener letras sin espacios",
minlength: "Tu Nombre debe contener al menos 2 caracteres"
,
nomb2_clie:
lettersonly: "Tu Nombre solo debe contener letras sin espacios",
minlength: "Tu Nombre debe contener al menos 2 caracteres"
,
apel1_clie:
required: "Ingrese su Primer Apellido",
lettersonly: "Tu Apellido solo debe contener letras sin espacios",
minlength: "Tu Apellido debe contener al menos 2 caracteres"
,
apel2_clie:
lettersonly: "Tu Apellido solo debe contener letras sin espacio",
minlength: "Tu Apellido debe contener al menos 2 caracteres"
,
usuar_clie:
required: "Ingrese un Nombre de Usuario",
minlength: "Tu Nombre de Usuario debe contener al menos 2 caracteres"
,
contr_clie:
required: "Ingrese una Contraseña",
minlength: "Tu Contraseña debe contener al menos 5 caracteres"
,
confirm_password:
required: "Ingrese una Contraseña",
minlength: "Tu Contraseña debe contener al menos 5 caracteres",
equalTo: "Ingrese la Misma Contraseña"
,
telef_clie:
required: "Ingrese un Número de Teléfono Valido",
number: "Ingrese un Número de Teléfono Valido",
minlength: "Ingrese un Número de Teléfono Valido"
,
email_clie: "Ingrese una Dirección de Correo Electrónico Válida"
,
errorElement: "em",
errorPlacement: function ( error, element )
// Add the `invalid-feedback` class to the error element
error.addClass( "invalid-feedback" );
if ( element.prop( "type" ) === "checkbox" )
error.insertAfter( element.next( "label" ) );
else
error.insertAfter( element );
,
highlight: function ( element, errorClass, validClass )
$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
,
unhighlight: function (element, errorClass, validClass)
$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
,
submitHandler: function( form )
var parametros = $(this).serialize();
$('form :input').val('');
$.ajax(
type: "POST",
url: "../ajax/guardar_cliente.php",
data: parametros,
beforeSend: function(objeto)
$("#resultados").html("Enviando...");
,
success: function(datos)
$("#resultados").html(datos);
load(1);
$('#addClienteModal').modal('hide');
);
);
我阅读了有关提交处理程序的信息，但也没有工作。
发送数据的方式是这样的，但这样它不会验证任何内容：
$( "#add_cliente" ).submit(function( event )
var parametros = $(this).serialize();
$('form :input').val('');
$.ajax(
type: "POST",
url: "../ajax/guardar_cliente.php",
data: parametros,
beforeSend: function(objeto)
$("#resultados").html("Enviando...");
,
success: function(datos)
$("#resultados").html(datos);
load(1);
$('#addClienteModal').modal('hide');
);
event.preventDefault();
);
这种没有验证的方式有效！但它不是我要找的。p>
这是 HTML：
<div id="addClienteModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form name="add_cliente" id="add_cliente" class="justify-content-center" align="center" action="">
<div class="modal-header">
<h4 class="modal-title">Registrar Cliente</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-row">
<div class="col form-group">
<label class="form-label" for="nomb1_clie">Primer Nombre: </label>
<input type="text" class="form-control" name="nomb1_clie" autocomplete="off" id="nomb1_clie" placeholder="Carlos" maxlength="20" onkeyup="this.value = this.value.toUpperCase();" required>
</div>
<div class="col form-group">
<label class="form-label" for="nomb2_clie">Segundo Nombre: </label>
<input type="text" class="form-control" name="nomb2_clie" autocomplete="off" id="nomb2_clie" placeholder="Agustin" maxlength="20" onkeyup="this.value = this.value.toUpperCase();">
</div>
</div>
<div class="form-row">
<div class="col form-group">
<label class="form-label" for="apel1_clie">Primer Apellido: </label>
<input type="text" class="form-control" name="apel1_clie" autocomplete="off" id="apel1_clie" placeholder="Guanipa" maxlength="20" onkeyup="this.value = this.value.toUpperCase();" required>
</div>
<div class="col form-group">
<label class="form-label" for="apel2_clie">Segundo Apellido: </label>
<input type="text" class="form-control" name="apel2_clie" autocomplete="off" id="apel2_clie" placeholder="Alvarez" maxlength="20" onkeyup="this.value = this.value.toUpperCase();">
</div>
</div>
<div class="form-row">
<div class="col form-group">
<label class="form-label" for="gener_clie">Genero: </label>
<select class="form-control" id="gener_clie" name="gener_clie">
<option value="MASCULINO">MASCULINO</option>
<option value="FEMENINO">FEMENINO</option>
</select>
</div>
</div>
<div class="form-row">
<div class="col form-group">
<label class="form-label" for="telef_clie">Telefono: </label>
<input type="text" class="form-control telef-mask" name="telef_clie" autocomplete="off" id="telef_clie" placeholder="(0000) 000 0000" maxlength="15">
</div>
</div>
<div class="form-row">
<div class="col form-group">
<label class="form-label" for="email_clie">E-Mail: </label>
<input type="email" class="form-control" name="email_clie" autocomplete="off" id="email_clie" placeholder="correo@mail.com" onkeyup="this.value = this.value.toUpperCase();">
</div>
</div>
<div class="form-row">
<div class="col form-group">
<label class="form-label" for="usuar_clie">Usuario: </label>
<input type="text" class="form-control" name="usuar_clie" autocomplete="off" id="usuar_clie" placeholder="miusuario" maxlength="20" onkeyup="this.value = this.value.toUpperCase();">
</div>
</div>
<div class="form-row">
<div class="col form-group">
<label class="form-label" for="contr_clie">Contraseña: </label>
<input type="password" class="form-control" name="contr_clie" autocomplete="off" id="contr_clie" placeholder="********" maxlength="20">
</div>
<div class="col form-group">
<label class="form-label" for="confirm_password">Confirmar Contraseña: </label>
<input type="password" class="form-control" name="confirm_password" autocomplete="off" id="confirm_password" placeholder="********" maxlength="20">
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-light" data-dismiss="modal" value="Cancelar">
<input type="submit" class="btn btn-primary" value="Registrar">
</div>
</form>
</div>
</div>
和PHP来保存数据
<?php
require_once ("../paginas/conexion_bd.php"); //Contiene Funcion que Conecta a la Base de Datos
// escaping, additionally removing everything that could be (html/javascript-) code
$nomb1_clie = mysqli_real_escape_string($con,(strip_tags($_POST["nomb1_clie"],ENT_QUOTES)));
$nomb2_clie = mysqli_real_escape_string($con,(strip_tags($_POST["nomb2_clie"],ENT_QUOTES)));
$apel1_clie = mysqli_real_escape_string($con,(strip_tags($_POST["apel1_clie"],ENT_QUOTES)));
$apel2_clie = mysqli_real_escape_string($con,(strip_tags($_POST["apel2_clie"],ENT_QUOTES)));
$gener_clie = mysqli_real_escape_string($con,(strip_tags($_POST["gener_clie"],ENT_QUOTES)));
$telef_clie = mysqli_real_escape_string($con,(strip_tags($_POST["telef_clie"],ENT_QUOTES)));
$email_clie = mysqli_real_escape_string($con,(strip_tags($_POST["email_clie"],ENT_QUOTES)));
$usuar_clie = mysqli_real_escape_string($con,(strip_tags($_POST["usuar_clie"],ENT_QUOTES)));
$contr_clie = mysqli_real_escape_string($con,(strip_tags($_POST["contr_clie"],ENT_QUOTES)));
$fecre_clie = date('Y-m-d', $timestamp = time());
$statu_clie = 1;
// Registrar en la Base de Datos
$sql = "INSERT INTO tabma_clie(nomb1_clie, nomb2_clie, apel1_clie, apel2_clie, gener_clie, telef_clie, email_clie, usuar_clie, contr_clie, fecre_clie, statu_clie) VALUES ('$nomb1_clie','$nomb2_clie','$apel1_clie','$apel2_clie','$gener_clie','$telef_clie','$email_clie','$usuar_clie','$contr_clie','$fecre_clie','$statu_clie')";
$query = mysqli_query($con,$sql);
// Si ha sido Agregado Exitosamentee
if ($query)
$messages[] = "El cliente ha sido registrado con éxito.";
else
$errors[] = "Lo sentimos, el registro falló. Por favor, regrese y vuelva a intentarlo.";
if (isset($errors))
?>
<div class="alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Error!</strong>
<?php
foreach ($errors as $error)
echo $error;
?>
</div>
<?php
if (isset($messages))
?>
<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>¡Bien hecho!</strong>
<?php
foreach ($messages as $message)
echo $message;
?>
</div>
<?php
?>
我试图在阅读和搜索中找出答案，但看不到错误或正确的方法。希望那里的任何人都可以帮助我！顺便谢谢！
【问题讨论】：
【参考方案1】：在你的 submitHandler 中试试这个
submitHandler: function( form )
var parametros = $( form ).serialize(); // I change 'this' to form
console.log(parametros); // for test purpose. See your log to confirm the result data
$('form :input').val('');
$.ajax(
type: "POST",
url: "../ajax/guardar_cliente.php",
data: parametros,
beforeSend: function(objeto)
$("#resultados").html("Enviando...");
,
success: function(datos)
$("#resultados").html(datos);
load(1);
$('#addClienteModal').modal('hide');
);
【讨论】：
这就是问题所在......谢谢！我很感激！现在继续工作！以上是关于模态中的 jQuery 验证通过 php 发送数据的主要内容，如果未能解决你的问题，请参考以下文章
Response.StatusDescription 没有从 JsonResult 发送到 jQuery