1

Tengo problemas con mi script en jQuery. Funciona con el input de correo pero con el de celular no funciona.

$('#validate').click(function() {

  var regex = /[\w-\.]{2,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/;

  if (regex.test($('#correo').val().trim())) {

  } else {
    alert('La direccón de correo no es válida');
  }

  if (isNaN($('#cel').val())) {
    alert('El teléfono solo debe contener números');
  }
  if ($('#cel').val().length < 9) {
    alert('El teléfono debe tener 9 caracteres. Ej. 666112233');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="form-group">
    <div class="row justify-content-center mt-4">
      <div class="col-6 col-md-4">
        <div class="input-group flex-nowrap">
          <div class="input-group-prepend">
            <span class="input-group-text" id="addon-wrapping"><i class="fa fa-phone-square bigicon"></i></span>
          </div>
          <input type="cel" id="cel" class="form-control" name="cel" placeholder="Celular">
        </div>
      </div>
    </div>
  </div>
</div>

4

2 respuestas 2

1

Este es un ejemplo funcional de validación para un campo telefónico con jQuery.

 
$(document).ready(function(){
	$("#formulario").submit(function () {
		if($("#telefono").val().length < 1) {
			alert("El teléfono es obligatorio");
			return false;
		}
		if(isNaN($("#telefono").val())) {
			alert("El teléfono solo debe contener números");
			return false;
		}
		if($("#telefono").val().length < 10) {
			alert("El teléfono debe tener 10 caracteres. Ej. 3214568526");
			return false;
		}
		return false;
	});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="formulario" id="formulario" action="" method="post">
<input type="text" name="telefono" id="telefono">
<input name="submit" id="submit" type="submit">
</form>

0

otra opcion si solo quieres habilitar el boton cuando el formato es correcto, en lugar de habilitar el boton puedes indicar al usuario que el formato es correcto sin necesidad de esperar hasta presionar enviar.

var i = document.getElementById("phone"),
    b = document.getElementById("formatBtn"),
    f = document.getElementById("field"),
    regex = i.pattern; //patron declarado en el control 

//el boton se habilita cuando el numero es correcto
i.addEventListener("input", function(e){
    b.disabled = true;  
    var n = i.value;  
    if (n.match(regex)) {
        b.disabled = false;
    }
}, false);
* When the pattern is matched */
input[type="tel"]:valid {
    color: green;
}

input[type="tel"]:valid ~  label::after {
    content: " ✓ ";
    color: green;
}

/* Unmatched */
input[type="tel"]:invalid {
    color: red;
}
  

/* */
input, button, #field {
    font-size: 1.5em;
    padding: .3em;
    border-radius: 1em;
    margin: .2em;
} 
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<label >Escriba su numero telefonico (10 digitos)</label>
  <div class="form-group">
<input type="tel" id="phone" value="" 
    placeholder="5514260834" 
    pattern="\d{10}"
    required
/>
<label for="phone"></label>
   </div>
</br>
<button id="formatBtn" disabled>Enviar Forma</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.