web-dev-qa-db-fra.com

Validation pour numéro de mobile à 10 chiffres et champ de saisie de focus sur non valide

J'ai besoin du code pour valider l'adresse e-mail et le numéro de téléphone portable dans jQuery ainsi que focus() sur ce champ particulier où les validations ne sont pas satisfaites. 

Ceci est ma requête

<form name="enquiry_form" method="post" id="enquiry_form">

    Full Name *
    <input class="input-style" name="name"  id="name" type="text" required> 
    Email *
    <input class="input-style" name="email"  id="email" type="email" required>
    Phone * 
    <input name="mobile"  id="mobile" type="number" required>

    <input type="submit" value="SUBMIT"  id="enq_submit"">

</form>
javascriptphpjqueryhtml5
3
user3286794

pour la validation du courrier électronique, <input type="email"> suffit.

pour mobile, attribut de modèle sans utilisation pour la saisie, comme suit:

<input type="number" pattern="\d{3}[\-]\d{3}[\-]\d{4}" required>

vous pouvez rechercher d'autres motifs sur http://html5pattern.com .

pour se concentrer sur le champ, vous pouvez utiliser l’événement onkeyup () comme:

function check()
{

    var pass1 = document.getElementById('mobile');


    var message = document.getElementById('message');

   var goodColor = "#0C6";
    var badColor = "#FF9B37";

    if(mobile.value.length!=10){

        mobile.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "required 10 digits, match requested format!"
    }}

et votre code HTML devrait être:

<input name="mobile"  id="mobile" type="number" required onkeyup="check(); return false;" ><span id="message"></span>
2
krupal

Le code ci-dessus est correct mais la validation mobile n'est pas parfaite.

j'ai modifié comme 

$('#enquiry_form').validate({
  rules:{
  name:"required",
  email:{
  required:true,
  email:true
  },
  mobile:{
      required:true,
  minlength:9,
  maxlength:10,
  number: true
  },
  messages:{
  name:"Please enter your username..!",
  email:"Please enter your email..!",
      mobile:"Enter your mobile no"
  },
  submitHandler: function(form) {alert("working");
  //write your success code here  
  }
  });
4
Prashant Tapase

J'ai utilisé $ form.submit () car il conserve la validation d'entrée HTML. 

De plus, j'ai utilisé le type d'entrée tel que pris en charge par les navigateurs mobiles, afficher uniquement le clavier numérique.

<input type="tel" minlength="10" maxlength="10" id="mobile" name="mobile" title="10 digit mobile number" required>


$('#mob_frm').submit(function(e) {
            e.preventDefault();
            if(!$('#mobile').val().match('[0-9]{10}'))  {
                alert("Please put 10 digit mobile number");
                return;
            }  

        });
3
Sampath Perera

vous pouvez aussi utiliser jquery pour cela 

  var phoneNumber = 8882070980;
            var filter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;

            if (filter.test(phoneNumber)) {
              if(phoneNumber.length==10){
                   var validate = true;
              } else {
                  alert('Please put 10  digit mobile number');
                  var validate = false;
              }
            }
            else {
              alert('Not a valid number');
              var validate = false;
            }

         if(validate){
          //number is equal to 10 digit or number is not string 
          enter code here...
        }
2
Surendra Kumar Ahir

Après avoir testé toutes les réponses sans succès. Parfois, les entrées prennent également un caractère alpha.

Voici le dernier code de travail complet comportant uniquement des chiffres, tout en gardant à l'esprit l'événement de touche de bouton de retour arrière pour l'utilisateur si un nombre est incorrect.

$("#phone").keydown(function(event) {
  k = event.which;
  if ((k >= 96 && k <= 105) || k == 8) {
    if ($(this).val().length == 10) {
      if (k == 8) {
        return true;
      } else {
        event.preventDefault();
        return false;

      }
    }
  } else {
    event.preventDefault();
    return false;
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="phone" id="phone" placeholder="Mobile Number" class="form-control" type="number" required>

1
Sanjeev Kumar

Vérifiez cette bibliothèque de validation Fichiers: http://bassistance.de/jquery-plugins/jquery-plugin-validation/ Demo: http://jquery.bassistance.de/validate/ démo/

0
Coder
function is_mobile_valid(string_or_number){
            var mobile=string_or_number;
            if(mobile.length!=10){
                return false;

            }
            intRegex = /[0-9 -()+]+$/;
            is_mobile=true;
            for ( var i=0; i < 10; i++) {
                if(intRegex.test(mobile[i]))
                     { 
                     continue;
                     }
                    else{
                        is_mobile=false;
                        break;
                    }
                 }
            return is_mobile;

}

Vous pouvez simplement vérifier en appelant la fonction is_mobile_valid(your_string_of_mobile_number);

0
Jasmel Pc

Utilisez jquery validator dans votre balise de script DEMO

<script src="js/jquery.validate.min.js"></script>

et validez votre élément comme ça 

   <form name="enquiry_form" method="post" id="enquiry_form">

    Full Name *
    <input class="input-style" name="name"  id="name" type="text"/>
    <br>
    Email *
    <input class="input-style" name="email"  id="email" type="email"><br>
    Phone * 
        <input id="mobile" name="mobile"  id="mobile"></input><br>

    <input type="submit" value="SUBMIT"  id="enq_submit">

</form>


 $('#enquiry_form').validate({
      rules:{
      name:"required",
      email:{
      required:true,
      email:true
      },
      mobile:{
          required:true,
      minlength:9,
      maxlength:10,
      }
      },
      messages:{
      name:"Please enter your username..!",
      email:"Please enter your email..!",
          mobile:"Enter your mobile no"
      },

      submitHandler: function(form) {
alert("working");
      //write your success code here  
      }
      });

0
kamesh
function isMobileNumber(evt, sender) { // Allows only 10 numbers // ONKEYPRESS FUNCTION
//evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
var NumValue = $(sender).val();
if (charCode > 31 && (charCode < 48 || charCode > 57)) {//|| NumValue.length > 9) {
    return false;
}
return true;}


function isProperMobileNumber(txtMobId) { //// VALIDATOR FUNCTION   
var txtMobile = document.getElementById(txtMobId);
if (!isNumeric(txtMobile.value)) { $(txtMobile).css("border-color", "red"); return false; }
if (txtMobile.value.length < 10) {
    $(txtMobile).css("border-color", "red");
    return false;
}
$(txtMobile).css("border-color", "")
return true; }

function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n) }
0
RandyMohan