Vuejs para programadores jQuery. Form Input Errores III

Vuejs para programadores jQuery. 

Form Input Errores

En este post trabajaremos con la gestión de error. Usaremos un Form Input para seguir con el mismo elemento HTML. El único error que controlaremos será que el input NO este vacío.

No es una gestión extensa sino que por el contrario es simplemente un ejemplo de uso. La gestión de errores de un Form suele ser más compleja uses lo que uses pero aquí hacemos un acercamiento. Paciencia. Estamos aprendiendo. Todo llegará.

JQUERY

Enlaces:

• Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/Errores/jQueryInputErrors.html
• GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/Errores/jQueryInputErrors.html

Antes de empezar debo aclarar que mucho de la gestión de error de este ejemplo lo realiza Bootstrap. El método es sencillo. Debajo del elemento se crean dos div's con las clases valid-feedback e invalid-feedback y solo se muestran cuando el elemento HTML (en este caso el Form Input) tiene la clase valid o la clase invalid. Esto hace que el JS solo tenga que agregar o quitar la clase correspondiente del elemento.

El HTML resultante:

<form> <div class="form-group"> <label for="exampleInput">JQuery input Gestión error</label> <input type="text" class="form-control" id="exampleInput" aria-describedby="inputHelp"> <small id="inputHelp" class="form-text text-muted">Lo que escribas aquí se mostrara debajo</small> <div class="valid-feedback"> ¡Correcto!! </div> <div class="invalid-feedback"> Por favor ingrese un valor. </div> </div> <div> <span id="contenido"></span> </div> </form>

Esto nos lleva a un tema que no habíamos visto y es la gestión de clases CSS en elementos HTML. Conservamos la estructura anterior HTML con los cambios ya nombrados así que solo nos queda ir directamente al JS. Empecemos por jQuery. Lineas relevantes:

if (!exampleInput.val()) {

exampleInput.removeClass('is-valid').addClass('is-invalid')

} else {

exampleInput.removeClass('is-invalid').addClass('is-valid')

}

Es lo único que hemos agregado. En el if se valora la variable. Para JavaScript un objeto NULL es FALSE en un if y si el input no tiene ningún carácter (incluido espacios) es NULL y por lo tanto será FALSE

El if pregunta si el contenido del input es NULL y con !(NOT) invierte la respuesta. Por lo tanto en NULL será TRUE. Si ese es el caso se elimina la clase CSS 'is-valid' y se agrega la clase 'is-invalid', en el else se realiza la operación inversa.

VUEJS

Enlaces:

• Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/Errores/VueJsInputErrors.html
• GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/Errores/VueJsInputErrors.html

En primer código de VueJs era muy sencillo así que para esta validación hemos agregado algunas cosas:

En el input hemos hecho dos cambios:

<input type="text" class="form-control" id="exampleInputEmail1" :class="classInput" v-model="contenido" @input='inputValidate' aria-describedby="emailHelp">

Hemos agregado un :class que es una forma de indicarle a Vuejs que ese atributo del elemento HTML tiene un contenido que debe ser parseado y puede usarse con cualquier atributo de cualquier elemento HTML.

Más adelante seguiremos viendo ejemplos del uso de :class pero expliquemos un poco más el concepto:

Si escribimos cualquier atributo HTML de la siguiente forma:

attr="valor" el elemento HTML recibirá un valor (normalmente un string) que el atributo sabrá procesar, un ejemplo de ello es class="content". En este caso el elemento HTML entiende que hay una clase llamada content dentro del contenido css. Y buscará la relación con esa clase.

VueJs intenta no redefinir los atributos, por ello nos da una manera de indicarle cuando es un valor que debe procesar antes que el HTML muestre el elemento.

Lo normal es usar los dos puntos delante del atributo. Por ejemplo:

:class="content"

En este caso, ya antes que se rendericen los elementos HTML Vue sabe que tiene que resolver "content" y darle al HTML algo que entienda. ¿Qué puede ser content? Content puede ser una variable o un método que devuelva un valor. Vuejs busca el método o variable y resuelve el resultado, quita los : del atributo y cuando se renderiza el HTML es un atributo normal.

¿Se puede usar esta forma con cualquier atributo HTML? Si, se puede

¿Es un resultado estático o dinámico? La variable o método asociado al atributo actualiza el atributo cuando actualiza su valor. Mejor ejemplos:

principal = "button"

<div :class="principal">Mensaje</div>

Se convertirá en:

<div class="button">Mensaje</div>

y si cambiamos el valor de principal:

principal = "nav-button"

Inmediatamente el HTML cambiará a:

<div class="nav-button">Mensaje</div>

Espero que ayudara la explicación. En otros post volveremos sobre este tema

Se ha agregado también la relación del evento Input (comentado en el post anterior) con una función (@input='inputValidate'). Nótese que no es necesario agregar los paréntesis propios de una función y que los eventos se llaman con @nombredeevento que varia de jQuery que usa on-nombredeevento en los elementos HTML o el método on para asociar eventos y funciones

classInput es una variable. Veamos los cambios en el código JS

<script>

new Vue({

el: '#app',

data: {

contenido: '',

classInput: ''

},

methods: {

inputValidate() {

this.classInput = this.contenido === '' ? 'is-invalid' : 'is-valid'

}

}

})

</script>

Hemos agregado la variable classInput con un valor '' y vemos algo totalmente nuevo: Métodos. Un método en un objeto JS es lo que normalmente llamamos función pero es parte de ese objeto.

En Vuejs creamos un objeto interno llamado methods que contiene los métodos que usaremos.

InputValidate es el método que llamamos en el evento @input y dentro hace un simple if ternario. Por las dudas explicaremos como funciona un if ternario:

El if ternario hay que dividirlo en dos partes. La validación y la asignación. Veamos la validación:

this.contenido === '' ? 'is-invalid' : 'is-valid'

El if pregunta si this.contenido === '' en caso de ser TRUE (?) devuelve 'is-invalid' y en caso de ser FALSE (:) devuelve 'is-valid'

Una vez resuelto eso se le asigna a this.classInput que al cambiar de valor actualiza, sin necesidad de más acciones, el :class del Form Input

Enlaces:

• CodeSandBox.io: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/Errores/indexInputErrors.html
• GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Input/Errores/indexInputErrors.html

Dudas en los comentarios, en el Slack de PEUM o en Twitter.