проблемы с jquery и санкционировать телефонное поле

у меня есть проблемы с моим scrip в jquery функционируй с неударом в лунку почты, но с неударом в лунку мобильного телефона оно не функционирует.

$('#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>
0
задан 20.03.2019, 03:19
2 ответа

Это функциональный пример validaciГіn для поля telefГіnico с 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
ответ дан 02.12.2019, 05:27

другой выбор, если ты только хочешь дать возможность кнопке, когда формат правилен, вместо того, чтобы давать возможность кнопке, ты можешь показывать пользователю, что формат правилен без необходимости ждать до того, чтобы нажимать на посылать.

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>
0
ответ дан 02.12.2019, 05:27

Теги

Похожие вопросы