Input number list with jQuery

Question

I'm making some work, but there are 3 issues still I have. I tried many ways, but nothing useless. If you know jQuery enough, please suggest me some changes.

First please view below URL:

http://jsfiddle.net/thisizmonster/maP57/

What am I doing is:

User will input phone number.
Number will be only 8 char length.
Number must begin with 9 or 7. Means 9xxxxxxx or 7xxxxxxx.
User can enter maximum 3 numbers.
Numbers must seperate with comma.

Current problem is:

There mustn't any comma after numbers. Only between numbers.
Validate numbers with 9xxxxxxx or 7xxxxxxx format while writing.
They can't enter continues commas. I mean ",," don't allow.

If you can't see example on jsfiddle, here is copied version:

HTML

<input type="text" id="sms-sender" />

JS

$(document).ready(function() {

$("#sms-sender").keypress(function(event) {
    var numbers = $("#sms-sender").val().split(',');
    var maxMsg = 3;

    if (event.which != 44 && (event.which < 47 || event.which > 59) || numbers.length > maxMsg) {
        event.preventDefault();
    }
    if (numbers.length > maxMsg) {
        event.preventDefault();
    }
    if (event.which == 44) {
        if (numbers.length <= maxMsg) {
            $("#number-div").html("");
            for (i = 0; i < numbers.length; i++) {
                $("#number-div").append("<div class='numbers'>&nbsp;"+numbers[i]+"</div>").fadeIn('slow');
                if (numbers[i].length != 8) {
                    $("#number-div").append("wrong")
                }
            }
        }
    }
    if (numbers[numbers.length - 1].length > 7) {
        if (event.which != 44) {
            event.preventDefault();
        }
    }
});

});

Links to live examples are a great *adjunct* to your question, but always post the relevant code actually *in* the question. People shouldn't have to follow links to help you, and StackOverflow should stand alone -- external content can get modified, deleted, moved, etc., such that the question ends up being meaningless and therefore of no use to anyone in the future. — T.J. Crowder, Apr 25 '11 at 08:43
try using a regexpression. this might help: http://txt2re.com/ — Tim Joyce, Apr 25 '11 at 08:49
Welcome to StackOverflow! The question is otherwise excellent. You say what you're doing, and you say what isn't working the way you want it to. So many people leave that second bit out. :-) — T.J. Crowder, Apr 25 '11 at 08:50

DarkLeafyGreen · Answer 1 · 2011-04-25T09:01:08.483

1

2. use keyup to validate numbers while typing http://jsfiddle.net/2n7Tf/1/

$('#sms-sender').keyup(validateNumber);

1. & 2. for the other stuff you can use regular expressions. But I am not sure what you mean with the comma. Please explain that.

/^[0-9]+$/.test(number)

will return true if number matches the regular expression. So here you go: http://jsfiddle.net/2n7Tf/4/

if(/^([0-9]+,)*[0-9]+$/.test($('#sms-sender').val())){
    alert("match!");
}

edited Apr 25 '11 at 09:01

answered Apr 25 '11 at 08:50

DarkLeafyGreen

69,338
131
383
601

Current: 98989898,98989898,98989898, I Wanted:9 8989898,98989898,98989898 You can see 3 commas in current, But I want 2 commas total. – Gereltod Apr 25 '11 at 08:51
so a comma is always surrounded by a number on both sides? – DarkLeafyGreen Apr 25 '11 at 08:55

score 1 · Accepted Answer · answered Apr 25 '11 at 08:59

1

Using regular expressions to state, 9 or 7 ([97]) followed by 7 digits and a comma (\d{7},) 0 to 2 times ({0,2}) covers everything before the number you are currently writing which in turn is covered by 9 or 7 ([97]) followed by 0 to 7 digits (\d{0,7}) all optionally (?).

http://jsfiddle.net/xTRph/

html:

<input type="text" id="sms-sender" />

javascript:

var lastGood = ''
$("#sms-sender").bind('keyup',function(e){
    if(!$('#sms-sender').val().match(/^([97]\d{7},){0,2}([97]\d{0,7})?$/))
        $('#sms-sender').val(lastGood)
    else
       lastGood = $('#sms-sender').val()
});

answered Apr 25 '11 at 08:59

Billy Moon

57,113
24
136
237

I copied your code. It's working very well. But only I thing I don't like is this script deleting character from behind. I think I must prevent enter invalid number, not delete after entered. Can you help in this situation? – Gereltod Apr 25 '11 at 09:06
1

In theory you could use e.preventDefault() to stop the default action for keydown, then add the e.charCode to the value of the input - but in my experience, charCode can very from computer to computer and browser to browser. Alternatively, you can make a clone input box that overlays the original and only updates after original has validated. Also, when sets focus to original when it gets focus. Neither solution is rock solid - generally there is always a flaw to browser based validation. Here it is anyway: http://jsfiddle.net/Jtp5P/ – Billy Moon Apr 25 '11 at 14:05
Thanks, After combined your example with my some effects, it's working perfect. http://jsfiddle.net/thisizmonster/g5LKB/ – Gereltod Apr 26 '11 at 01:11
Another new problem occurred. We now must validate first two digits, not first one. First two digits must be 99, 95, 75. Can you RegEx for me? – Gereltod Apr 26 '11 at 02:22

score 0 · Answer 3 · edited Aug 12 '12 at 15:09

0

/^[79]\d{7}(,[79]\d{7}){0,2}$/.test($("#sms-sender").val())

edited Aug 12 '12 at 15:09

j0k

22,600
28
79
90

answered Apr 25 '11 at 09:02

Corneliu

2,932
1
19
22

Input number list with jQuery

3 Answers3