JSFiddle - React, Tailwind, and code Playground

by Carlos Quintero

HTML

<form onsubmit="return validar()">
            <table>
                <tr>
                    <td>
                        <label for="nombre">Nombre:</label>
                    </td>
                    <td>
                        <input type="text" id="nombre" name="nombre" onChange="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" onChange="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" onChange="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" onChange="validar(this.id);"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit">
                    </td>
...

CSS

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

JavaScript

function validar(X){

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

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

var index = $.inArray(valor,ar);

if(index > -1){

	$("input[id="+X+"]").hide(500);
  $("#validacion_"+X).html("");


}else{
$("#validacion_"+X).html("No existe esa información");
$("#validacion_"+X).attr('class','noesta');
}


}