2

esta es mi primera vez validando un formulario y ya lo logre pero ahora quisiera saber como puedo enviar el formulario si la validación esta correcta, a demás quiero que se envié sin recargar la pagina y guardar la información en una base de datos.

Mi código JS:

const name = document.getElementById('name')
const last = document.getElementById('lastname')
const email = document.getElementById('email')
const quest = document.getElementById('quest')
const form = document.getElementById('form')
const text = document.getElementById('warnings')

form.addEventListener("submit", e=>{
    e.preventDefault()
    let warnings = ''
    let send = false
    text.innerHTML = 'enviado'
    if(name.value.length < 3) {
        warnings += 'El nombre no es valido <br>'
        send = true
    } 
    if(last.value.length < 3) {
        warnings += 'El apellido no es valido <br>'
        send = true
    }     
    if(quest.value.length < 10 ) {
        warnings += 'Lo que sabes hacer es muy poco <br>'
        send = true
    }
    if(send) {
        text.innerHTML = warnings
    }

    return false
})
1
  • Usarás nodejs para el backend? Commented el 3 dic. 2020 a las 1:24

3 respuestas 3

2

Los detalles dependen exclusivamente de la implementación de tu backend, sin embargo generalmente se hace un request al mismo por medio de fetch con los datos que quieres enviar.

De la documentación, para subir contenido JSON (en el ejemplo la variable data) a un backend por medio de la ruta /profile y utilizando un pedido HTTP de tipo post:

const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

Combinando tu implementación con el ejemplo que viene en la documentación, una posible solución se vería cómo así:

const name = document.getElementById('name')
const last = document.getElementById('lastname')
const email = document.getElementById('email')
const quest = document.getElementById('quest')
const form = document.getElementById('form')
const text = document.getElementById('warnings')

function enviarDatos(datos) {
  fetch(url, {
      method: 'POST',
      body: JSON.stringify(datos),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(res => res.json())
    .catch(error => console.error('Error:', error))
    .then(response => console.log('Success:', response));
};

form.addEventListener("submit", e => {
  e.preventDefault()
  let warnings = ''
  let send = false
  text.innerHTML = 'enviado'
  if (name.value.length < 3) {
    warnings += 'El nombre no es valido <br>'
    send = true
  }
  if (last.value.length < 3) {
    warnings += 'El apellido no es valido <br>'
    send = true
  }
  if (quest.value.length < 10) {
    warnings += 'Lo que sabes hacer es muy poco <br>'
    send = true
  }
  if (send) {
    text.innerHTML = warnings
  }

  !send && enviarDatos({
    quest: quest.value,
    last: last.value,
    name: name.value
  });
  return false
})

UPDATE:

Con respecto a esta línea:

send && enviarDatos()
  1. Este tipo de operación se llama evaluación de corto circuito, la manera en la que JS realiza una evaluación utilizando el operador AND es evaluando de izquierda a derecha y si todos los valores dan true se devuelve este valor final para la comparación. Sin embargo, si algún valor es (o se resuelve en) Falsy termina la ejecución de la evaluación.

Ejemplo:

function holaMundo() {
  return "Hola mundo!";
}

console.log(false && holaMundo());

console.log(true && holaMundo());

  1. Como menciona Bryro debería de ser !send, me confundí debido al nombre de la variable, te recomiendo cambiar el nombre de tu variable a notSend para que sea más descriptiva o si quieres mantener send entonces cualquier error le asigne un valor de falso a la variable indicando que no debe de ser enviado el request.
2
  • 1
    podrias agregar una explicacion de como funciona esta linea send && enviarDatos({}) y corregirlo ya que a pesar de todo envia los datos porque la variable send pasa a true con cualquier error ejemplo: true && console.log("enviando datos!") debes cambiarlo a !send && enviarDatos({}) o send || enviarDatos({})
    – Bryro
    Commented el 3 dic. 2020 a las 14:03
  • @Bryro Muchas gracias por la corrección y recomendación, he editado la respuesta para incluir ambos.
    – FranAcuna
    Commented el 3 dic. 2020 a las 15:09
0

Pero, entiendo tu pregunta.

La respuesta.... USANDO AJAX

Claro, suponiendo que estás trabajando directamente con archivos de php, ya debes tener tu conexión a bases de datos y el archivo que debe recibir dichos datos para guardarlos.

Comencemos...

Para empezar, comencemos por averiguar como se identifica el botón con el que haces la acción, trataré de hacer un ejemplo sencillo.

<form id="EjemploFormulario" name="EjemploFormulario">
    <input type="text" id="id" name="id" value="" >
    <input type="text" class="form-control" name="nombre" id="nombre">
    <input type="submit" id="EnviarDatos" value="Enviar">
</form>

Ahora analicemos la información. Tenemos dos campos: "id" & "nombre". El boton "EnviarDatos" es el que activa el envío de datos.

Pasemos a JavaScript:

$(document).ready(function(){
//Le decimos al sistema que debe estar completamente cargado para proceder
//y le decimos que al hace click sobre el botón "EnviarDatos" evite la recarga automatica
    $("#EnviarDatos").click(funciton(e){
      e.preventDefault();//Esta linea evita que se haga el reload de la página
          //Extraemos los datos de nuestro formulario
          $Datos = $("#EjemploFormulario").serialize();
          //o bien puedes llamarlo así
          var Datos = $("#EjemploFormulario").serialize();
          //La forma en la que decidas llamar los elementos es valida a partir de getElementById() o $("#id_del_elemento") o $(".clase_del_elemento") 
          // y a continuación viene la validación de cada input, lo haré de la siguiente manera
         var id= document.getElementById('id');
         var name = document.getElementById('nombre');
         // toma en cuenta que cuando usas "const" es cuando es una variable universal y "var" para una variable de funcion.
         //Ahora validamos con los condicionales
         if(id == null){
             //Si el campo está vacío debe mandar una alerta o hacer alguna función que te avise sobre esto
         }else{
            //De lo contrario procede al siguiente punto.
              if(name == null){
                 //Si el campo está vacío debe mandar una alerta o hacer alguna función que te avise sobre esto
              }else{
                 //de lo contrario ya puede validar el envío de datos.
                 $.ajax({
                   url:'./GuardarDatos.php',//esta es la direccion de tu archivo que recibe los datos
                   data:$Datos,//bien podría ser solo "Datos" pues es la otra variable que se puede declarar y te mostré arriba.
                   type: 'post',//tambien podría ser de tipo 'get', pero esto aplica para cuando mandas elementos por separado y se declararia así-> { id : id , name : name} 
                   //Si deseas recibir un texto que se genera desde el backend de php puedes usar lo siguiente
                   dataType:'json',//solo si realmente recibes algun mensaje se ocupa
                   encode:true,//solo si realmente recibes algun mensaje se ocupa
                   //Ahora tenemos 3 funciones de ajax.
                   beforeSend: function () {
                   //Aquí puedes hacer cualquier cosa mientras se envían los datos
                   }, error: function () {
                   //Aquí puedes poner una alerta por si no está funcionando la conexión
                   }, success: function () { //success: function (mensajes)  <--- esa opción es cuando el archivo al que le mandamos información nos regresa alguna clase de mensaje
                   //Aquí puedes hacer alguna función o mensaje si se realiza la petición y se recibe una respuesta
                   }
                 })
              }
         }
     })
})

Ahora bien tu archivo de php sería algo como esto:

<?php
    include('miConexion.php');//Sólo si tienes un archivo que hace la conexión de lo contrario
    $conexion="";// Aquí iría tu conexión a la base de datos
    //y recibimos los datos
    $id = $_POST['id'];
    $nombre = $_POST['nombre'];
    //Recuerda que esos son los atributos name="" que le diste a tus inputs en el formulario
    //y si mandaste por separado los elementos y por metodo 'get' sería así.
    $id = $_GET['id'];
    $nombre = $_GET['name']; //recuerda que se le dió otro nombre a la variable en la JQuery en el ejemplo de 'get'
  // a partir de aquí haces tus procedimientos de guardado, eliminado o lo que vayas a hacer

  // y finalmente si devuelves algun mensaje sería así
 $mensaje="Texto que se regresa";
 echo json_encode($mensaje);
 // si sonn varios mensajes
 $mensaje1="Texto que se regresa 1";
 $mensaje2="Texto que se regresa 2";
 $mensaje3="Texto que se regresa 3";     
 $mensajes = array($mensaje1,$mensaje2,$mensaje3);
 echo json_encode($mensajes); 
 // y si planeas usar esos mensajes afuera en el Script recuerda que un array empieza por la posición 0 así que afuera sería mensajes[0],mensajes[1],mensajes[2] por si van destinados a algo
?>

MUCHO TEXTO YA LO SÉ

Pero verás que es la forma más rápida de validar formularios, obviamente necesitas de JQuery y esta va en tu archivo HTML antes de que cierre el BODY

3
  • Sí, pero leyendo lo que pone, es primeriso en esto. Por lo que irse directo a NodeJS es bastante para el. Y como todos, debemos empezar por lo fácil Commented el 3 dic. 2020 a las 2:48
  • no, si lees la documentación de ajax define que: si tu formulario ya tiene method="POST" ya no se declara en el ajax. en este caso, como no lo coloqué defino directamente sobre JavaScript como se envían los datos. Commented el 3 dic. 2020 a las 2:53
  • Agradezco la ayuda que me dieron pero digamos que uso node js y ejs para las plantillas ya que no la pagina la estoy desarrollando junto a un bot de discord
    – NewOw3n
    Commented el 3 dic. 2020 a las 12:59
0

Muchas gracias por la ayuda al fin logre hacer el envió del formulario y sin ningún problema!

const name = document.getElementById('name')
const last = document.getElementById('lastname')
const email = document.getElementById('email')
const quest = document.getElementById('quest')
const form = document.getElementById('form')
const text = document.getElementById('warnings')

form.addEventListener("submit", e=>{
    e.preventDefault()
    let warnings = ''
    let send = false
    text.innerHTML = 'enviado'
    if(name.value.length < 3) {
        warnings += 'El nombre no es valido <br>'
        send = true
    } 
    if(last.value.length < 3) {
        warnings += 'El apellido no es valido <br>'
        send = true
    }     
    if(quest.value.length < 10 ) {
        warnings += 'Lo que sabes hacer es muy poco <br>'
        send = true
    }
    if(send) {
        text.innerHTML = warnings
    } else {
        $Datos = $("#form").serialize();
        var Datos = $("#form").serialize();
        $.ajax({
            url:'/save/form-team',
            data: $Datos,
            type: 'post',
            dataType:'json',
            encode:true,
            beforeSend: function () {
            }, error: function () {
                text.innerHTML = 'hubo un error intenta de nuevo'
            }, success: function () { 
                text.innerHTML = 'enviado'
            }
          })
    }
    return false
})

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.