3

Recientemente comencé a aprender php e intento crear una página de registro sencilla en html usando phpmyadmin y xampp, pero me encuentro con un problema.

Tengo un formulario para crear una "cuenta" en una base de datos donde en el archivo html está el formulario para enviar la información, lo que hice fue crear un par de entradas de texto y creé dos botones, uno para validar y cambiar la información para que se envíe en un formato específico y el otro, un submit, envía esta a través del método post para enviar la información a un archivo php y esta agregarla a la base de datos.

El problema es que agregué un addEventListener para validar la información. Lo que pasa es que si está el addEventListener, el archivo php no recibe la información de los formularios. Lo intenté con get y post, pero en ambos pasa lo mismo. El addEventListener evita que se envíe la información al archivo php.

¿Qué debo hacer?

Este es el Código del HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <script defer src="js.js"></script>
</head>
<body>
    <form action="reg.php" method="post">
        Ingrese su nombre:
        <input type="text" id="acc" name="acce">
        <br>
        Ingrese su telefono:
        <input type="text" id="tel" name="tele">
        <hr>
        <p id="info">Para continuar primero valide la informacion</p>
        <input id="Acceder" type="submit" value="Crear cuenta">
    </form>
    <p id="v">Validar</p>
    <a href="registro.html"></a>
</body>
</html>

JS

let val = document.getElementById("v");
let acc = document.getElementById("acc");
let tel = document.getElementById("tel");
val.addEventListener("click", function () {
    if ( (acc.value && tel.value  ) == "" ) {
        alert("Hay uno o más valores en blanco")
    } else if ( (tel.value*0) != 0 ) {
        alert("Debe ingresar numeros solamente en el area de telefono")
    } else {
        info.textContent = "Se realizaron los cambios necesarios, ya se puede registrar";
        let str = acc.value.toUpperCase();
        str = str.normalize('NFD').replace(/[\u0300-\u036f]/g, "");
        acc.value = str;
        val.disabled = true;
        acc.disabled = true;
        tel.disabled = true;
    }
});

PHP

<?php
if($_POST){
    $acc=$_POST['acce'];
    echo "Nombre: ".$acc;
}
?>

Usando el código que te comparto, pueden copiarlo y pegarlo en el archivo html, js y php correspondiente para verificar esto.

Si se presiona el botón "verificar" primero y luego "Crear cuenta" la información no se envía al php pero si solo se presiona el botón "Crear cuenta" envía la información correctamente.

1 respuesta 1

3

Para validar los campos del formulario tienes estas opciones:

  • El atributo required de HTML que no permite enviar campos vacíos
  • Una validación en JS que se ejecute en el evento oninput del campo de teléfono
  • Una expresión regular que solo permita números

function validarCaracteres(valor) {
  //Se define una variable que contiene una expresión regular para permitir sólo números
  let numeros = /^[0-9]+$/;
  //Validar los caracteres del campo teléfono
  if (valor.match(numeros)) {
    console.log('Campo válido');
  } else {
    alert('Debe ingresar numeros solamente en el area de telefono');
  }
};
<!DOCTYPE html>
<html lang="en">

<head>
  <script defer src="js.js"></script>
</head>

<body>
  <form action="reg.php" method="post">
    Ingrese su nombre:
    <input type="text" id="acc" name="acce" required>
    <br> Ingrese su telefono:
    <input type="text" id="tel" name="tele" oninput="validarCaracteres(this.value)" required>
    <hr>
    <p id="info">Para continuar primero valide la informacion</p>
    <input id="Acceder" type="submit" value="Crear cuenta">
  </form>
</body>

</html>

El ejemplo tiene funciones básicas, el resto lo debes acomodar a tu proyecto. Y recuerda validar también del lado del servidor.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.