JSFiddle - React, Tailwind, and code Playground

by Carlos Quintero

HTML

<form name="formulario" id="formulario">
            <table>
                <tr>
                    <td>
                        <label for="nombre">Nombre:</label>
                    </td>
                    <td>
                        <input type="text" id="nombre" name="nombre" onKeyDown="validar(this.id);"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div id="validacion_nombre" class="error"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="apellidos">Apellidos:</label>
                    </td>
                    <td>
                        <input type="text" id="apellidos" name="apellidos" onKeyDown="validar(this.id);"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div id="validacion_apellidos" class="error"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="edad">Edad:</label>
                    </td>
                    <td>
                        <input type="text" id="edad" name="edad" onKeyDown="validar(this.id);"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div id="validacion_edad" class="error"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="telefono">Telefono:</label>
                    </td>
                    <td>
                        <input type="text" id="telefono" name="telefono" onKeyDown="validar(this.id);"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div...

CSS

.noesta{
  color:#fff;
  background-color:red;
}

JavaScript

function validar(X){

var ar = ["carlos","quintero","30","telefono"];

var valor = $("input[id="+X+"]").val();

if(valor.length == 0 || valor == null || valor.match(/^\s+$/) ){
$("#validacion_"+X).html("No existe esa información");
$("#validacion_"+X).attr('class','noesta');

}else{
$("#validacion_"+X).html("");
$("#validacion_"+X).removeClass('noesta');
}

}
function submit(){

var form = document.getElementById("formulario");

//variable que almacenara la cantidad de inputs que no cumplen una condicion
var cont = 0;

for (i=0;i<form.elements.length;i++){
	
  var valor = form.elements[i].value;
 	var atr = $(form.elements[i]).attr('id');
  
		if(valor.length == 0 || valor == null || valor.match(/^\s+$/) ){
				$("#validacion_"+atr).html("No existe esa información");
				$("#validacion_"+atr).attr('class','noesta');
				
        //sumamos a la variable este item si no cumple una condicion
        cont = parseInt(cont)+1;
        
		}

}

//verificamos si hay inputs no validados, si esta en 0 enviamos el email, si no cancelamos hasta que se validen
if(cont >=1){

}else{
alert("El formulario fue enviado");
				$("#validacion_"+atr).html("");
				$("#validacion_"+atr).removeClass('noesta');
}



}