web-dev-qa-db-ja.com

10桁の携帯電話番号の検証、および入力フィールドを無効にフォーカス

メールと携帯電話番号をjQueryで検証するためのコードと、検証が満たされていない特定のフィールドのfocus()が必要です。

これは私の質問です

<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>
javascriptphpjqueryhtml
4
user3286794

メール検証用、<input type="email">で十分です。

モバイルの場合、次のように入力のパターン属性を使用しません。

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

http://html5pattern.com で他のパターンを確認できます。

フィールドに焦点を合わせるには、onkeyup（）イベントを次のように使用できます。

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!"
    }}

hTMLコードは次のようになります。

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

上記のコードは正しいですが、モバイル検証は完璧ではありません。

私は次のように修正しました

$('#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  
  }
  });
5
Prashant Tapase

$ form.submit（）を使用したのは、HTML入力検証を維持するためです。

また、モバイルブラウザでサポートされている入力タイプtelを使用しました。数字キーパッドのみを表示します。

<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

成功せずにすべての回答をテストした後。時々、入力はアルファベット文字も受け取ります。

これは、数値のみが入力された最後の完全に機能するコードであり、何かの数値が正しくない場合のユーザーのバックスペースボタンのキーイベントも考慮しています。

$("#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>
2
Sanjeev Kumar

jqueryを使用することもできます

  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
var message = document.getElementById('contact-error');
$('#contact').focusout(function(){
        if(!$(this).val().match('[0-9]{10}'))  {
                $('#contact-error').addClass('contact-message');
        message.innerHTML = "required 10 digits, match requested format!";
    }else {
        $('#contact-error').removeClass('contact-message');
        message.innerHTML = "";
    }
})
.contact-message {
    display: block;
    margin-bottom: 20px;
    color: #cc0033;
}
<input type="text" id="contact" required>
<span id="contact-error"></span>
0
Adam

この検証ライブラリファイルを確認してください： http://bassistance.de/jquery-plugins/jquery-plugin-validation/ デモ： http://jquery.bassistance.de/validate/demo /

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;

}
_

関数is_mobile_valid(your_string_of_mobile_number);を呼び出すだけで確認できます

0
Jasmel Pc

スクリプトタグでjqueryバリデーターを使用 [〜＃〜] demo [〜＃〜]

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

このようにして要素を検証します

   <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