Guía 27 – Validaciones por AJAX personalizados

Estamos acostumbrados a que PHPRunner hace algunas validaciones utilizando Ajax (comunicación asíncrona), por ejemplo para validar que un campo no esté duplicado, pero no está claro cómo añadir este tipo de validaciones personalizadas cuando el usuario está rellenando un formulario de datos.

En jerga de tecnología, se indica que se desea comunicación por Ajax entre el navegador y el servidor de aplicaciones.

Este tipo de comunicaciones se puede utilizar para validar un dato o recuperar una información del servidor partiendo de la información ya informada en el formulario.

Objetivo

Describir de forma sencilla y clara cómo hacer comunicaciones Ajax (entre navegador y servidor de aplicaciones) para validad y/o recuperar datos

DEMO: https://fhumanes.com/guia27/

Descripción funcional y técnica

El ejemplo es muy, muy sencillo. En el campo “Valor” hay que introducir un número y valida que sea el inmediato superior a los valores que hay en la base de datos.

  • Si es correcto, informa que es correcto.
  • Si es incorrecto, indica que es incorrecto y en el campo pone le valor que es correcto.

Se resuelve esta problemática programando la parte del navegador en JavaScript y la parte del servidor  en PHP.

En el evento “JavaScript OnLoad event” se ha incluido este código:

function validarValor(ctrl){
    pvalor = ctrl.getValue(); // We collect the value of the field from the form
    // Setting function and receives response with AJAX
    $.ajax({
     type: 'POST',  //  SEND with POST method
     url: './ajax_valida_valor.php',  // Destination file (the PHP that manages the data)
     data: { valor: pvalor } // Data that are sent

     }).done(function( msg ) {  // Function that runs if everything has gone well
      msgArr = msg.split(";");
      if ( msgArr[0] == '1' ) { // Is OK
        $("#ajax_custom_valor").text('');
        //   alert(msgArr[2]);
      } else { // Is KO
        //  ctrl.setValue(msgArr[1]);
        $("#ajax_custom_valor").text(msgArr[2]);
        ctrl.setValue(""); //  Delete the value if it is not correct
        //  alert(msgArr[2]);
      }
     }).fail(function (jqXHR, textStatus, errorThrown){ // Function that runs if something has gone wrong
      // We show the message with the error that has been produced
      alert("The following error occured: "+ textStatus +" "+ errorThrown);
    });
  }
// ----------------------------------------------------------------------------
var ctrlvalor = Runner.getControl(pageid, 'valor');
var ctrltext = Runner.getControl(pageid, 'test');

// ---------------------------------------------------------------------------
//  DIV for error messages
$('[data-helpfor="valor"]').append( '<strong class="help-block" style="color:red";><div id="ajax_custom_valor"></div></strong>');

// --------------------------------------------------------------------------
// Change value of  Valor
ctrlvalor.on('change', function(e){
  validarValor(ctrlvalor);
 });
// Control button SAVE
this.on('beforeSave', function(formObj, fieldControlsArr, pageObj){
  if (ctrlvalor.getValue() != '' ) {
    return true;
  }else{
    // alert('The "Valor" field must be informed');
    $("#ajax_custom_valor").text('The "Valor" field must be informed');
    Runner.delDisabledClass ( pageObj.saveButton );
    return false;
}});

 

Y se ha creado un fichero custom llamado “ajax_valida_valor.php”, con este contenido:

<?php
require_once("include/dbcommon.php"); // DataBase PHPRunner

if (!isset($_POST['valor'])) { //  Control of the call and verification of the existence of the parameter
  echo("0;;Please provide a Valor.");
  die();
}
$valor = $_POST['valor'];

// Get the highest value that exists in the database
$rs = DB::Query("SELECT max(valor) maxValor FROM guia27");
$maxValor = $rs->value("maxValor"); //  To control if there is a response to the query
if ( $maxValor == NULL ) {
  $maxValor = 0; 										//  If there is no record loaded puts the value 0
}
$maxValor += 1;

if ( $maxValor == $valor) { // Compare if correct entered value 
  echo "1;$maxValor;Ok, Good answer";
} else {
  echo "2;$maxValor;Error, the Valor is not correct";
}
?>

En el código, a través de comentarios, se explica cada parte. Sólo, como aclaración, indicar que el servidor siempre responde mediante una cadena de caracteres dividida en 3 partes mediante el símbolo”;”, para informar:

  1.  Código de respuesta
  2. Valor que se debía haber indicado
  3. Mensaje de contestación

Espero que el ejemplo, aunque un poco absurdo, sirva para analizar y comprender el funcionamiento de este tipo de soluciones.

Como siempre, para cualquier cosa que necesitéis indicádmelo a través de email [email protected]

También os dejo el proyecto del ejemplo para que podáis ejecutarlo en vuestros Windows.

Adjuntos

Archivo Tamaño de archivo Descargas
zip PHPRunner 10.2 y backup de base de datos - actualizado 31/10/2021 34 KB 138

Blog personal

Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies.