Phone Number Jquery validation ... need numbers AND a few other characters

Question

Someone helped me create a jquery contact form, with field validation. There is a phone number field. The field allows for only numbers. We need the field to also contain a few other common "phone" character... such as ()-. and space. Can someone help me modify the code below ...

// only numberic value validation
    $( ".only_numberic" ).keypress(function(event){
        var inputValue = window.event ? event.keyCode : event.which;

        // allow letters and whitespaces only.
        if(    !( inputValue >= 48 && inputValue <= 57) && (inputValue != 0 && inputValue != 8 && inputValue != 9 ) ) {  
            event.preventDefault(); 
        }
    });

Note: I don't mind that the class is still "only_numberic" (that's only a name) ... just need the validation fixed.

FINAL FIX

Below is the final fix that works.

// only numberic value validation
$( ".only_numberic" ).keypress(function(event){
    var inputValue = window.event ? event.keyCode : event.which;

    // allow letters and whitespaces only, and () and - and period[.] and (space).
    if(    !( inputValue >= 48 && inputValue <= 57) && (inputValue != 0 && inputValue != 8 && inputValue != 9 && inputValue!=40 && inputValue!=41 && inputValue!=45 && inputValue!=46 && inputValue!=32) ) {  
        event.preventDefault(); 
    }
});

Possible duplicate of [Validate phone number with JavaScript](https://stackoverflow.com/questions/4338267/validate-phone-number-with-javascript) — Douwe de Haan, Apr 16 '18 at 09:02
There are plenty of ways to validate phone numbers, but I need help with the editing code above (especially with limited javascript knowledge) — , Apr 16 '18 at 17:50

score 2 · Accepted Answer · answered Apr 16 '18 at 09:10

2

Here is the code for that. Copy this function and add "number-input" class to your textbox. It accepts only number and space. You can add more characters by adding ASCII value into this array:

[32,46, 8, 9, 27, 13, 110, 190]

Phone Number: <input type="text" class="number-input">

$(document).on('keydown','.number-input',function(e){
  console.log(e.keyCode);
    if ($.inArray(e.keyCode, [32,46, 8, 9, 27, 13, 110, 190]) !== -1 ||
        // Allow: Ctrl+A, Command+A
        (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
        // Allow: home, end, left, right, down, up
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

answered Apr 16 '18 at 09:10

Rahul Chauhan

1,424
14
13

This didn't work when I added it in. It just allowed for numbers again. I assume I need to change the "keyCodes" that I need to use. And, the code above doesn't mention keycodes for ()-. or space. – Apr 16 '18 at 16:17
I mentioned that put your extra ASCII code into this array [32,46, 8, 9, 27, 13, 110, 190]. I put 32 for space. You can put your character ascii and input box allows that character. – Rahul Chauhan Apr 17 '18 at 04:13
I used https://ascii.cl/ to get some ASCII codes for ()-. and used the following in the array. [32,46, 8, 9, 27, 28, 29, 40, 41, 45, 46, 13, 110, 190] ... I could type numbers, but my new characters wouldn't work. For example, #40 is for a left parenthesis. But I couldn't type that in the form. – Apr 18 '18 at 07:07
I used your comments about ASCII codes, and just modified my script above. It works now. Thanks. I'll post the revised code above... – Apr 18 '18 at 07:14

score 0 · Answer 2 · answered Apr 16 '18 at 09:10

0

$(document).ready( function (){   $( "#mobile-num" ).on( "blur" , functi
var mobNum = $( this ).val();
var filter = /^\d*(?:\.\d{1,
if (filter.test(mobNum)) {
if (mobNum.length!= 10 ){
                  alert( "valid" );

             } else {
                alert( 'Please put 10

return false;
              }
            }
else {
              alert("not a vaild number");
return false;
           }   });
});

answered Apr 16 '18 at 09:10

Praveen Kumar Tripathi

282
3
21

I'm not great at javascript, but there are errors in the code above. Also, this doesn't solve my problem ... it throws an alert into the mix. – Apr 16 '18 at 16:18

Phone Number Jquery validation ... need numbers AND a few other characters

2 Answers2