Validar campo de texto con javascript

Obligar al usuario a introducir un valor en un campo de texto perteneciente a un formulario se puede hacer de la siguiente manera con javascript.

Código

<script type="text/javascript">
    function validar() {
        //obteniendo el valor que se puso en campo text del formulario
        miCampoTexto = document.getElementById("miCampo").value;
        //la condición
        if (miCampoTexto.length == 0) {
            return false;
        }
        return true;
    }
</script>
 
<form action="mipagina.php" onsubmit="return validar()">
    <input type="text" id="miCampo" name="miCampo"><br>
    <input type="submit" value="Enviar">
</form>

miCampoTexto.length -> indica el número de caracteres del texto introducido

En esta validación los usuarios deben llenar los campos de texto de forma obligatoria ya que devolvería FALSE si fuera el caso, aunque la validación no permite dejar el campo vacio el usuario también puede poner solo espacios en blanco con lo que la validación no sería completa.

Para los espacios en blanco se podría utilizar expresiones regulares sólo agregando este código /^\s+$/.test(miCampoTexto) con el cual la condición quedaría así


Código

<script type="text/javascript">
    function validar() {
        //obteniendo el valor que se puso en el campo text del formulario
        miCampoTexto = document.getElementById("miCampo").value;
        //la condición
        if (miCampoTexto.length == 0 || /^\s+$/.test(miCampoTexto)) {
            return false;
        }
        return true;
    }
</script>
 
<form action="mipagina.php" onsubmit="return validar()">
    <input type="text" id="miCampo" name="miCampo">
    <input type="submit" value="Enviar">
</form>


Más información sobre expresiones regulares lo puedes encontrar en este mismo blog aquí

Ejemplo básico de un formulario validado

En este ejemplo tenemos un formulario con un campo de texto y un combo.

Código

<script type="text/javascript">
    function validar() {
 //obteniendo el valor que se puso en el campo text del formulario
 var miCampoTexto = document.getElementById("miCampo").value;
 //la condición
 if (miCampoTexto.length == 0 || /^\s+$/.test(miCampoTexto)) {
     alert('El campo de texto esta vacio!');
     return false;
 }
    
 //Validando el combo select
 var miCombo = document.getElementById("miCombo").value;
 if(miCombo == ""){
     alert('Debe Elegir una opcion en el combo!');
     return false;
 }

 return true;
 }
</script>

<form action="mipagina.php" onsubmit="return validar()">

    Mi campo <input type="text" id="miCampo" name="miCampo">
 <br>
    Mi combo <select id="miCombo">
     <option value="">Elegir</option>
     <option value="1">Franz</option>
     <option value="2">Paul</option>
     <option value="3">Renzo</option>
    </select>
 <br>
    <input type="submit" value="Enviar">
</form>

Demostración


3 comentarios: