Как проверить, существует ли значение с помощью Jquery, и если это так, чтобы предотвратить отправку журнала?
я получил несколько кодов JQuery, чтобы проверить, существует ли какое-либо значение (cedula в этом случае) в базе данных.
система работает нормально, показывает, когда значение cedula существует или нет, я хотел бы теперь, чтобы предотвратить отправку формы, потому что, хотя он говорит, что он не может быть использован, потому что он уже существует, он отправляет данные, и поскольку это уже сохраненная cedula не вставляет.
Registro.php
<?php
include "conexion.php";
?>
<!doctype html>
<html>
<head>
<link href="styles.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#cedula').blur(function(){
$('#info').html('<img src="loader.gif" alt="" />').fadeOut(300);
var cedula = $(this).val();
var dataString = 'cedula='+cedula;
$.ajax({
type: "POST",
url: "comprobar_disponibilidad.php",
data: dataString,
success: function(data) {
$('#info').fadeIn(300).html(data);
}
});
});
});
</script>
<h1 align ="center">Bienvenido</h1>
<a href ="index.html"><ol>Pagina Principal</ol></a>
<a href ="registrar.php"><ol>Registrar</ol></a>
<a href ="listado.php"><ol>Listado</ol></a>
<a href ="Sancion.php"><ol>Sancion</ol></a>
<form method="POST" action ="procesar.php">
<div>
<label> Ingrese su cedula </label>
<input type="text" id="cedula" name="cedula">
<div id="info"></div>
</div>
<label> Ingrese su primer nombre </label>
<input type="text" id="nombre1" name="nombre1"><br/>
<label> Ingrese su segundo nombre </label>
<input type="text" id="nombre2" name="nombre2"><br/>
<label> Ingrese su primer apellido </label>
<input type="text" id="apellido1" name="apellido1"><br/>
<label> Ingrese su segundo apellido </label>
<input type="text" id="apellido2" name="apellido2"><br/>
<label> Ingrese su rango </label>
<div><select name="rango">
<?php
global $cone;
$registros=mysqli_query($cone,"select * from rangos");
while ($reg = mysqli_fetch_array($registros))
echo "<option value='$reg[id_rango]'>".$reg[rango]."</option>";
?>
</select></div>
<input type="submit" value="enviar">
</form>
</body>
</html>
Comprobar_disponibilidad.php
<?php
sleep(1);
require_once'conexion.php';
global $cone;
if($_REQUEST) {
$cedula = $_REQUEST['cedula'];
$sql="Select * from personal where cedula = '$cedula'";
if ($result=mysqli_query($cone,$sql))
{
// Return the number of rows in result set
$rowcount=mysqli_num_rows($result);
//printf("Result set has %d rows.\n",$rowcount); mostrar resultado
if($rowcount > 0)
echo '<div id="Error">Cedula ya registrada</div>';
else
echo '<div id="Success">Disponible</div>';
}
}
?>
2 answers
В вашем коде есть две совершенно разные вещи, которые вы хотите получить; динамическая проверка бюллетеня с помощью ajax и окончательная отправка данных, когда пользователь отправляет полную форму.
Сначала определите, каким образом вы хотите выполнить проверку своих данных; на стороне сервера или на стороне клиента.
Давайте посмотрим на пример на стороне клиента:
Хорошо структурируйте свою форму:
<form action="procesar.php" method="post" id="myform">
<input type="text" name="cedula">
<input type="text" name="nombre">
<input type="text" name="apellido">
...
<input type="submit" value="enviar">
</form>
Немного модульность:
function requestValidation(done) {
$.ajax({
url: 'validate.php',
type: 'POST',
contentType: 'application/json',
data: { cedula: $('input[name=cedula]').val().trim() }
success: function(res) { done(null, JSON.parse(res).isValid) },
error: function(err) { done(err) }
});
}
Проверить cedula:
$('input[name=cedula]').blur(function() {
requestValidation(function(err, isValid) {
if (err) console.error(err);
if (isValid) // Dar visto bueno
else // Cédula ya existe
});
});
Проверка данных при отправке формы
function submit(e) {
// Recoger los datos:
var data = {};
$('#myform').children('input[type=text]').each(function(i, input) {
var name = $(input).attr('name');
var value = $(input).val().trim() || undefined;
data[name] = value;
});
// Comprobar validez de los datos:
var emptyFields = Object.keys(data).some(function(key) {
return data[key] !== undefined;
});
// Evitar enviar el formulario si alguna validación no se cumple:
if (emptyFields) {
e.preventDefault();
return alert('Todos los campos son obligatorios!');
}
requestValidation(function(err, isValid) {
if (err) {
e.preventDefault();
alert('Error al intentar validar la existencia de la cedula');
console.error(err);
} else if (!isValid) {
e.preventDefault();
alert('El número de cédula ya existe');
}
// Filtro superado, formulario enviado.
});
}
$('#myform').submit(submit);
Этого должно быть достаточно.
Помните, что e.preventDefault() - это то, что предотвращает отправку формы, submit - это событие, которое выполняется, когда пользователь пытается отправить форму. Отправьте JSON в качестве ответа из php, чтобы ajax мог работать для вас.
Если вы хотите сделать это с сервера, вам просто нужно отправить данные вашей формы, сделать соответствующие проверки из php и отправить ответы в соответствии с вашими проверками, если пользователь ошибся, он снова отображает ту же страницу с сообщением об ошибке.
В JQuery вам нужно избежать события, и вы можете лучше оптимизировать ajax как PHP.
JQuery имеет funcion". on()", затем вы предвидите событие отправки с этим funcion". preventDefault()" и улучшаете ajax.
Пример:
$('#formCedula').on("submit", function(event){
// Evita el envio del formulario
event.preventDefault();
// Cache variables
var divInfo = $("#info");
var loader = "<img src='loader.gif' />";
$.ajax({
type: "POST",
url: "comprobar_disponibilidad.php",
beforeSend: divInfo.html(loader);
data: this.serialize(),
done: function(data){
divInfo.html(data);
}
})
})
И в PHP:
<?php
$postCedula = ( isset($_POST['cedula']) )? trim($_POST['cedula']) : '';
if( !empty($_POST['cedula']) ) ){
require_once'conexion.php';
$sql = "SELECT * FROM personal WHERE cedula = '$cedula'"
$result = mysqli_query($connection, $sql);
$counter = mysqli_num_rows($result);
if($result AND $counter){ // Cero 0, PHP lo toma como FALSE
echo "Cedula ya existe";
}
else {
mysqli_free_result($result);
$sql = "INSERT INTO personal (cedula) VALUES ('$cedula')";
if( mysqli_query($connection, $sql) ){
echo "Exito, se guardo cedula $cedula";
}
else {
echo "Error, no se guardo cedula $cedula";
}
}
}
else {
echo "Falto cedula...";
}
Очевидно, что много не хватает в 2 кодах, в бэкэнде проверки, санации, оптимизации кода и т. д.
Интерфейс может быть лучше оптимизирован с помощью HTML5, JQuery и некоторые инструменты javascript, я надеюсь, помогут вам.