I did a modal where I'm going to record new data. This form sends the data from a PHP file. If the data is recorded or not registered, it will send me a message. This message is passed through a JavaScript file so as not to reload the page and the message appears in the same modal. This JavaScript file also makes a very simple validation, if you do not enter any data, you will paint the text boxes and add a message, etc.
I was seeing on the web and it turns out that jQuery has its own library jquery validation . I was reading a bit and I tried to modify the code, but I only get to the validation part of the fields.
When I want to link the messages in the PHP file to show them in the same modal without reloading the window, they do not appear.
My PHP file (after adding the data, it sends me a message, this message is passed by JSON):
<?php
require_once 'conf\sql.php';
$auth = new datos();
if($_POST)
{
$validador = array('success' => false, 'messages' => array());
$negocio = $_POST['negocio'];
$f_fin = new DateTime($_POST['fecha_fin']);
$fecha_fin = $f_fin->format('Y-m-d');
$titulo = $_POST['titulo'];
$area = $_POST['area'];
$mail = $_POST['email'];
$estado = '0';
$sqlAgregarDatos=$auth->agregarDatos($negocio, $titulo, $area, $fecha_fin, $email, $estado);
if($sqlAgregarDatos == true)
{
$validador['success'] = true;
$validador['messages'] = "Se agregó un nuevo dato a la tabla";
}
else
{
$validador['success'] = false;
$validador['messages'] = "ERROR !! Hemos tenido un problema al registrar los datos.";
}
echo json_encode($validador);
}
?>
datos.js
(here I do the validation and messages within the modal, and I create a variable: datosTabla
):
$(function(){
$("#addModal").on('click', function() {
$("#addForm").each(function() { this.reset() });
$(".form-group").removeClass('has-error').removeClass('has-success');
$(".text-danger").remove();
$(".messages").html("");
$("#addForm").unbind('submit').bind('submit', function() {
$(".text-danger").remove();
var form = $(this);
var negocio = $('#negocio').val();
var f_fin = $('#fecha_fin').val();
var titulo = $('#titulo').val();
var area = $('#area').val();
var mail = $('#mail').val();
if(negocio == "")
{
$("#negocio").closest('.form-group').addClass('has-error');
$("#negocio").after('<p class="text-danger"> Seleccione un negocio </p>');
}
else
{
$("#negocio").closest('.form-group').removeClass('has-error');
$("#negocio").closest('.form-group').addClass('has-success');
}
if(f_fin == "")
{
$("#fecha_fin").closest('.form-group').addClass('has-error');
$("#fecha_fin").after('<p class="text-danger"> Ingrese la fecha fin</p>');
}
else
{
$("#fecha_fin").closest('.form-group').removeClass('has-error');
$("#fecha_fin").closest('.form-group').addClass('has-success');
}
if(titulo == "")
{
$("#titulo").closest('.form-group').addClass('has-error');
$("#titulo").after('<p class="text-danger"> Ingrese un titulo</p>');
}
else
{
$("#titulo").closest('.form-group').removeClass('has-error');
$("#titulo").closest('.form-group').addClass('has-success');
}
if(area == "")
{
$("#area").closest('.form-group').addClass('has-error');
$("#area").after('<p class="text-danger"> Seleccione el area</p>');
}
else
{
$("#area").closest('.form-group').removeClass('has-error');
$("#area").closest('.form-group').addClass('has-success');
}
if(mail == "")
{
$("#mail").closest('.form-group').addClass('has-error');
$("#mail").after('<p class="text-danger"> Ingrese el Email del Gestor</p>');
}
else
{
$("#mail").closest('.form-group').removeClass('has-error');
$("#mail").closest('.form-group').addClass('has-success');
}
if(negocio && f_fin && titulo && area && mail)
{
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
dataType: 'json',
success:function(response) {
$(".form-group").removeClass('has-error').removeClass('has-success');
if (response.success == true)
{
$(".messages").html('<div class="alert alert-green alert-dismissible">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> Mensaje: </strong>'+response.messages+
'</div>');
$("#addForm").each(function() { this.reset() });
datosTabla.ajax.reload(null, false);
}
else
{
$(".messages").html('<div class="alert red-bg alert-dismissible">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> Mensaje: </strong>'+response.messages+'</div>');
}
}
});
}
return false;
});
});
});
And the validation with jquery Validation (I can not get the message sent to me in the modal indicating that the data was added).
$("#addForm").validate({
rules:
{
negocio: { required: true },
fecha_fin: { required: true },
titulo: { required: true },
area: { required: true },
email: { required: true }
},
messages:
{
negocio: { required: "<span class='text-danger'> Seleccione un negocio </span>" },
fecha_fin: { required: "<span class='text-danger'> Ingrese una fecha </span>" },
titulo: { required: "<span class='text-danger'> Ingrese un titulo </span>" },
area: { required: "<span class='text-danger'> Seleccione el area </span>" },
email: {
required: "<span class='text-danger'> Por favor, ingresar un email </span>",
email: "<span class='text-danger'> Ingresar un email valido: [email protected] </span>"
}
}
});