CODEWITHSUNDEEP
javascriptphphtml
farhantechno
farhantechno

Reputation: 595

I am trying to validate mobile with javaScript but it not working

I have a mobile and I want to check if the mobile number is less then 10 or greater then 13 then I want to show the message

My code:

<input name="mobile" id="mobile" placeholder="+91" class="form-control tboxs" type="text" style="font-family: 'JameelKhushkhatLRegular'">

<button style="width: 100%" type="button"  id="submit" value="submit" class="btn-theme-colored btn">SUBMIT <span class="glyphicon glyphicon-send">


        <script>
            $('#submit').click(function(){
       if($('#first_name').val() == '' ){
          alert('Name can not be left blank and atleast 4 char long');
          return false;
        }else if(!$("input[name='redio_gender']:checked").val()){
          alert('Please Select Gender');
          return false;   
        }else if($('#multiple').val( ) == '') {
          alert('Please Select Age');
          return false;
        }else if($('#profession').val( ) == '') {
          alert('Please Select your Profession');
          return false;
        }else if($('#taluka').val( ) == '') {
          alert('Please Select Taluka');
          return false;
        }else if($('#village').val( ) == '') {
          alert('Please Enter village');
          return false;  
        }else if($('#interest').val( ) == '') {
          alert('Please Select Area of Interest');
          return false;   
        }else if($('#masjid').val( ) == '') {
          alert('Please Enter Nearest Masjid');
          return false; 
        }else if($('#mobile').val( ) == '' || parseInt($('#mobile').val() < 10 )  ||  parseInt($('#mobile').val() > 13)) {
          alert('Please Enter Valid Mobile Number');
          return false;  
        }else{  
          $.ajax({
              --
              --
              });
       }
 });
        </script>

In the above code, I validate my code with javascript.

Upvotes: 1

Views: 67

Answers (3)

J0ker98
J0ker98

Reputation: 457

You can try the following:

$('#submit').click(function(){
    var mobile = $('#mobile').val();
    if(mobile.length < 10 || mobile.length > 13) {
        //mobile length is less than 10 or greater than 13, show error message
    }
});

Your final code would be this:

 <script>
       $('#submit').click(function(){

       var mobile = $('#mobile').val();

       if($('#first_name').val() == '' ){
          alert('Name can not be left blank and at least 4 char long');
          return false;
        } else if(!$("input[name='redio_gender']:checked").val()){
          alert('Please Select Gender');
          return false;   
        } else if($('#multiple').val( ) == '') {
          alert('Please Select Age');
          return false;
        } else if($('#profession').val( ) == '') {
          alert('Please Select your Profession');
          return false;
        } else if($('#taluka').val( ) == '') {
          alert('Please Select Taluka');
          return false;
        } else if($('#village').val( ) == '') {
          alert('Please Enter village');
          return false;  
        } else if($('#interest').val( ) == '') {
          alert('Please Select Area of Interest');
          return false;   
        } else if($('#masjid').val( ) == '') {
          alert('Please Enter Nearest Masjid');
          return false; 
        } else if(mobile.length < 10 || mobile.length > 13) {
          alert('Please Enter Valid Mobile Number');
          return false;  
        } else {  
          $.ajax({
              --
              --
              });
       }
 });
        </script>

Or you could use html attributes to do that by using minlength and maxlength on the text input and you may even want to switch the input type from text to tel

<input name="mobile" id="mobile" placeholder="+91" class="form-control tboxs" type="tel" style="font-family: 'JameelKhushkhatLRegular'" minlength='10' maxlength='13'>

Upvotes: 2

TsV
TsV

Reputation: 639

https://jqueryvalidation.org

      $.validator.addMethod(
        'phone',
        function (value, element, requiredValue) {
          var phoneRegexp = /^\+380\d{7,10}$/;
          return phoneRegexp.test(value);
        },
      );

      var validator = $('#form_id').validate({
              debug: true,
              errorClass: 'error-class',
              errorElement: 'div',
              rules: {
                  'phone': {
                      required: true,
                      phone: true,
                      minlength: 10,
                      maxlength: 13
                  }
              },
          }
      );

Upvotes: 2

Farah Jokhio
Farah Jokhio

Reputation: 37

Try this : 

var mob = '03311111111';

if( mob.length < 10 || mob.length > 13){
    // show error message
}

Upvotes: 2

Related Questions