Formularios en Javascript

11-3-2020

Para controlar los formularios, y sobre todo para controlar la información que se meterá en la base de datos, usamos soluciones en frontend (HTML5, Javascript) y Backend (por ejemplo PHP).

Todas son importantes, pero las soluciones desde el frontend sirven solamente desde el punto de vista de la usabilidad del usuario, es decir, le proveen de información para cargar la información correctamente, pero no impiden que algún usuario malintencionado pase información incorrecta o incluso dañina a la base de datos.

Es por eso que las soluciones desde el frontend no son las únicas a implementar, si bien desde la usabilidad ayudan muchísimo a que la experiencia del usuario sea positiva.

Imaginemos nuestro formulario en HTML:

    <form id="formulario">
        <!-- <input type="text" required> -->
        <input type="text"><br>
        <p id="error"></p>
        <button id="btn">Enviar</button>
    </form>

 

 

//Primeramente vamos a capturar los elementos:
let form = document.getElementById('formulario')
let btn = document.getElementById('btn')
let input = document.querySelector('input')

let datosOk = false
let error = document.getElementById('error')
input.addEventListener('input',() => {
    let valor = input.value
    //console.log(valor)
    let longitud = valor.length
    console.log(longitud)

    if(longitud <= 3) {
        if(longitud)
            error.innerText = 'Este campo admite como mínimo 3 caracteres'
        else 
        error.innerText = 'Campo requerido'
        error.style.display = 'block';
        datosOk = false
    }
    else {
        error.innerText = ''
        error.style.display = 'none';
        datosOk = true
    }
})

form.addEventListener('submit', e => {
    e.preventDefault()
    //console.log('submit en formulario')
    if(datosOk) {
        let valor = input.value
        console.log(valor)
    }
    else {
        console.log('ERROR!!!!')
        error.innerText = 'Campo requerido'
        error.style.display = 'block';
        datosOk = false
    }
})