Validar un campo input de telefono sin ser este obligatorio

[mensajeescrito]

Una pregunta un poco digamos peculiar:

¿Puedo yo hacer un campo input para validad un numero de telefono que tenga minimo 9 digitos y sea numerico, pero que solo haga la validacion si el usuario marca almenos un digito, pero que si no marcara ningun digito no considerara el campo input obligatorio?.


Es decir el input- telefono de entrada no es obligatorio, pero si marca almenos un digito, entonces comienza a validarlo cuando se le de al boton submit.


Eso se puede hacer?


ALguien puede decirme como

Mil gracias de antemano.

[Alexis88]

Claro, solamente tendrías que comprobar que el campo tiene datos con la propiedad length, en caso de haberlos, realizas la validación.

Saludos

[mensajeescrito]

gracias alexis88 , serias tan amable de ponerme un ejemplo para mi problema , se muy poco de javascript para hacer esto.

Y si no es mucho pedir , que el mensaje de aviso salga junto al input , y no como una ventana emergente.


Si fuera php medio medio pero de javascript se me escapa.


gracias.

[Alexis88]

Aquí tienes uno:

Código Javascript:

function validar(){
    var telefono = document.getElementById("id_del_campo"),
        regex = /\d{9}/;
 
    if (telefono.value.length){
        if (regex.test(telefono.value)){
            return true;
        }
        else{
            return false;
        }
    }
    else{
        return true;
    }
}
 

Cuando ejecutes el envío de los datos del formulario, ejecutas la función de validación, en la cual tomarás al campo a validar y crearás la expresión regular con la que validarás su contenido. Luego, evalúas la extensión del contenido del elemento en cuestión; si está es mayor a cero (también intepretado como true), verificas que el valor del campo coincida con el formato especificado en al expresión regular y de ser así, retornas true para que se realice el envío de los datos del formulario o false para no realizar el envío si no se da la coincidencia con el formato. En caso de que el campo no posea contenido (también interpretado como false), simplemente retornas true para que se realice el envío de datos del formulario.

Saludos

[mensajeescrito]

Mil gracias por tu ayuda San alexis88 !!!!

[mensajeescrito]

Alexis toi triste lo he implementado pero no va, mira he puesto esto:

Código Javascript:

function validarTelefono(){
        var telefono = document.getElementById("telefono_movil"),
            regex = /\d{9}/;
     
        if (telefono.value.length){
            if (regex.test(telefono.value)){
                return true;
            }
            else{
                return false;
            }
        }
        else{
            return true;
        }
    }
 

Código HTML:

<form id="miformulario" method="post" action="enviar.php">
 
<input type="number" name="telefono_movil" placeholder="Tel&eacute;fono / M&oacute;vil" value="" 
                                                    
 id="telefono_movil" class="inputstyle" size="43" maxlength="100" autocomplete="on" title="Escriba su Tel&eacute;fono / M&oacute;vil"/>
 
 
<input name="enviar" type="image" src="../../imgs/btn_enviar.png" class="submitEnviar" onclick="validarTelefono()" value="ENVIAR" alt="enviar" />
 

Y el formulario se envia, si, aun metiendo un simple "4" por ejemplo en el campo del telefono.


Que esta pasando, que esta mal no se por que?

[mensajeescrito]

Incluso he probado a poner esto y nada:

Código HTML:

<form id="miformulario" method="post" action="enviar.php" onsubmit="validarTelefono()">
 

[mensajeescrito]

Yo me lo guiso y yo me lo como, esta es la solucion faltaba un return:

Código HTML:

<form id="miformulario" method="post" action="enviar.php" onsubmit=" return validarTelefono()">
 

Espero que a alguien le sirva.

Un saludo

[Alexis88]

Disculpa la demora en contestar, recién despierto, recuerda que no vivo en Europa y por acá es algo temprano aún.

Así es, eso es lo que te faltaba hacer, de hecho creí que lo sabías, por eso te dije que cuando hagas el envío, ejecutes la función de validación. También podrías hacerlo directamente en JavaScript:

Código Javascript:

document.getElementById("miformulario").addEventListener("submit", function(event){
    event.preventDefault();
    var telefono = document.getElementById("telefono_movil"),
        regex = /\d{9}/;
     
    if (telefono.value.length){
        if (regex.test(telefono.value)){
            this.submit();
        }
    }
    else{
        this.submit();
    }
}, false);
 

La única diferencia está en que primero cancelo el evento submit con el método preventDefault, realizo la validación y si todo está bien, ejecuto el envío de los datos del formulario con el método submit. Como al inicio cancelo el envío de los datos, si la validación no es exitosa, simplemente no ocurre nada más pues ya se canceló el envío, por eso no hay un return false porque no es necesario, aunque podrías mostrar un mensaje de alerta en su lugar indicándole al usuario que debe de ingresar el número de teléfono correctamente.

Saludos

[IsaBelM]

ambas condiciones se pueden tratar en una sola expresión

/((?=\d*)|(\d){9})/