SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery alert not working

    Hello all

    Basically I am trying to display an alert if a '0' is entered into a form input. This does not seem to be working.

    Also I would like to customize this slightly. I only want to display the alert if they enter '0' as the first character of that input.

    Here is my example, any help is appreciated

    http://jsfiddle.net/YMs4q/28/

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The reason your demo wasn't working was because you have the following line in your code which was calling an undefined variable called $input:

    Code JavaScript:
    $input.prop('disabled', true);

    See the below link for an updated version of your demo which i have cleaned up and got working.

    http://jsfiddle.net/YMs4q/29/

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, sorry should have seen that.

    Couple of things:

    1. When you enter 0 as the first character the alert pops up but the 0 remains as the first character in both the Phone Number boxes. When the alert is called the 0 should be removed as the first character in both of these boxes.

    2. When you enter 0 as the second/third...etc character the alert still pops up. I would only want the alert to pop up if they enter 0 as the first character. At any other point in the text box they should be allowed to enter 0 without the alert popping up.

    3. **NEW FEATURE - I would actually like to impose another rule on this text box. If they enter any character that is NOT numerical, ie letter, space, ( etc I would like another alert to pop up saying: please only use numbers




    Thanks again

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I would recommend you try the above two points on your own first as they are pretty straight forward to achieve and involve minimal time, if you get stuck i or someone else can assist you from their but i don't like handing out code unless an attempt was made to solve the problem.

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    certainly. i shall give it a go and report back

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i have managed to only allow numerical values

    i have tried to remove the 0 from the textbox by using:

    Code:
    if (e.keyCode == 48) {
            alert("Please do not enter 0 as the first character")
            $('#paxphoneno').val = ("");
        }
    this does not work.

    also with regards to applying the rule to the first character, i think it can be done using an array... but i don't think i would be able to get it working anytime soon. if i had more time i would persist but i'm so busy with other things if i would take you or another expert 'minimal time' i would appreciate some more help.

    thanks

    here is the updated version
    http://jsfiddle.net/YMs4q/38/

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    3. **NEW FEATURE - I would actually like to impose another rule on this text box. If they enter any character that is NOT numerical, ie letter, space, ( etc I would like another alert to pop up saying: please only use numbers
    It can be a bad user-interface design to throw error alerts at a user when they're typing things out. What seems to work better than that is to not allow such invalid characters from being typed, and possibly to display the warning somewhere on the screen until something else it typed, or they go to the next field.

    Something like the following update should do, where keypress is used to check if anything other than a numeric value is used.

    When dealing with the leading 0, it's not enough to check if the field was empty when 0 was entered, because then it's possible for someone to type in a number and then go back to the start and add a 0.
    So instead, you can use the keyup event which allows you to access the value after the pressed key has been added, so that you can check to see if the start of the value is a 0. If it is, it can be lopped off with a suitable message appearing.

    I've also added the message as a span with a class of error, along with a bit of CSS to space it out a bit from the field, and as a last touch there's also a blur event that stops the error from being displayed once they leave the field.

    See what you think about the latest update to it, at http://jsfiddle.net/YMs4q/71/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi paul appreciate the response.

    firstly when you press and hold the 0 key, it allows you to enter 000000 without warning and without removal.

    i don't suppose anybody would actually do that but you know, just in case

    also can you actually clarify what conditions the warning displays under. i would prefer if the messages appears immediately.

    ie.
    as and whenever they enter an illegal character it displays 'Please only use numbers'
    as and whenever they enter a leading 0 it displays 'Please do not enter 0 as the first character'


    Lastly... i have tried to use the code on my webpage and am having difficulties. i have uploaded the entire library to my webspace. jquery functions work on other pages but on this particular page they do not seem to be working...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <script type="text/javascript" src="http://www.londonheathrowcars.com/scripts/jquery-1.7.1.js"></script>
    
    
    <script type="text/javascript">
    
    String.prototype.ucfirst = function() {
        return this.charAt(0).toUpperCase() + this.slice(1);
    };
    
    $('input, select', '#bookingform').bind('change keyup blur focus', function() {
        $('#paxfullnumber').val(
        $('#paxphonecode').val() + $('#paxphoneno').val().ucfirst());
    });
    
    $('#paxphoneno').keypress(function(e) {
        $(this).next('.error').remove();
        if (e.which < 48 || e.which > 57) {
            $(this).after('<span class="error">Please only use numbers</span>');
            return false;
        }
    }).keyup(function(e) {
        if (this.value.substr(0, 1) === "0") {
            $(this).after('<span class="error">Please do not enter 0 as the first character</span>');
            this.value = this.value.substr(1);
            $(this).trigger('change');
        }
    }).blur(function() {
        $(this).next('.error').remove();
    });
    
    </script>
    
    </head>
    
    <body>
    
    <form name="bookingform" id="bookingform">
    <p>Your phone number (main):</p>
    <p><select name="paxphonecode" id="paxphonecode">
    <option value="">...</option><option value="0044">United Kingdom (+44)</option>
    </select><input type="text" name="paxphoneno" id="paxphoneno" /></p>
    
    <p>Full number: <input type="text" name="paxfullnumber" id="paxfullnumber" /></p>
    </form>
    </body>
    </html>
    do you know why?

    http://www.londonheathrowcars.com/bookings/testing1.asp

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by antonyx View Post
    hi paul appreciate the response.

    firstly when you press and hold the 0 key, it allows you to enter 000000 without warning and without removal.
    It is only in the keyup phase that the field value is accessible. With keybown and peypress, it's the value before the key was pressed that is there instead.
    One of those zeros got removed before, but an update can fix that.
    To show an error about that before the key is released from keydown means working out if the 0 will end up at the start of the value. From keydown you cannot edit the value, because that value is what there was "before" the key was pressed, so it would mean dealing with some not very compatible insertion bar information to find out if the insertion bar is at the start of the value, which tends to get very messy.

    Quote Originally Posted by antonyx View Post
    i don't suppose anybody would actually do that but you know, just in case
    An update now has all leading zeros being removed, so even if you do hold down the zero key, they're all removed once you let go of that key, by using the following:

    Code javascript:
    this.value = this.value.replace(/^(0+)/, '');

    Quote Originally Posted by antonyx View Post
    also can you actually clarify what conditions the warning displays under. i would prefer if the messages appears immediately.

    ie.
    as and whenever they enter an illegal character it displays 'Please only use numbers'
    as and whenever they enter a leading 0 it displays 'Please do not enter 0 as the first character'
    The keypress message about an illegal character appears immediately, and the character is not allowed to be entered.
    The keyup message about the leading zero appears the instant that the key is released, and all leading zeros are removed.

    You can see it in action at http://jsfiddle.net/YMs4q/74/

    Quote Originally Posted by antonyx View Post
    Lastly... i have tried to use the code on my webpage and am having difficulties. i have uploaded the entire library to my webspace. jquery functions work on other pages but on this particular page they do not seem to be working...
    Could it be that you need to place the jQuery code in the jQuery wrapper?

    Code javascript:
    jQuery(function ($) {
        // jquery code here
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    paul that is brilliant. i was not nesting the function properly!

    also the new fix with the zeros is very good. if you weren't half the width of the earth away from me i'd give you a big hug!

    so there it is, for anybody in england taking international phone numbers, you have the perfect form in jquery

    it places the international dialing code before the telephone number and ensures the leading 0 is not registered

    http://jsfiddle.net/YMs4q/74/


    thanks paul

  11. #11
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well it's not absolutely full proof.

    i mean we could impose a character limit based on the international dialing code they select to ensure they always enter a valid phone number.

    also if one of our american friends enters their dialing code '001' and then proceeds to enter their phone number including the '1' part of the dialing code it will give a false number such as 00111231231234 (a digit too long)... but to resolve these two issues would involve a lot of research on every conceivable phone number and frankly i do not have the time for that

  12. #12
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, just want this field to ALLOW the Tab key (as well as only allow numerical keys).

    Code:
    $('#paxphoneno,#paxphoneno2,#bkphoneno,#bkpaxphoneno,#bkpaxphoneno2').keypress(function (e) {
        $(this).next('.error').remove();
        if (e.which < 48 || e.which > 57) {
            $(this).after('<span class="error">Please only use numbers</span>');
            return false;
        }
    I think the Tab is keycode 9 but not sure how to write the statement out.

    *Update - I would also like to add delete/backspace and enter keys.

  13. #13
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found this function but am having difficulty incorporating it into my function

    example
    Code:
    $(document).ready(function() {
        $("#txtboxToFilter").keydown(function(event) {
            // Allow: backspace, delete, tab and escape
            if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || 
                 // Allow: Ctrl+A
                (event.keyCode == 65 && event.ctrlKey === true) || 
                 // Allow: home, end, left, right
                (event.keyCode >= 35 && event.keyCode <= 39)) {
                     // let it happen, don't do anything
                     return;
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                    event.preventDefault(); 
                }   
            }
        });
    });
    my function

    Code:
    $('#paxphoneno,#paxphoneno2,#bkphoneno,#bkpaxphoneno,#bkpaxphoneno2').keypress(function (e) {
        $(this).next('.error').remove();
        if (e.which < 48 || e.which > 57) {
            $(this).after('<span class="error">Please only use numbers</span>');
            return false;
        }
    }).keyup(function(e) {
        if (this.value.substr(0, 1) === "0") {
            $(this).after('<span class="error">Please do not enter 0 as the first character</span>');
            this.value = this.value.replace(/^(0+)/, '');
            $(this).trigger('change'); 
        }
    }).blur(function () {
        $(this).next('.error').remove();
    });

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You can use it as a function called isEditingKey:

    Code javascript:
    function isEditingKey(evt) {
        // Allow: backspace, delete, tab and escape
        if (evt.keyCode == 46 || evt.keyCode == 8 || evt.keyCode == 9 || evt.keyCode == 27 || 
             // Allow: Ctrl+A
            (evt.ctrlKey === true && evt.keyCode == 65) || 
             // Allow: home, end, left, right
            (evt.keyCode >= 35 && evt.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return true;
        }
        return false;
    }

    And then use it from within your keypress event, so that it will ignore those non-char characters:

    Code javascript:
    $('#paxphoneno,#paxphoneno2,#bkphoneno,#bkpaxphoneno,#bkpaxphoneno2').keypress(function (e) {
        if (isEditingKey(e)) {
            return;
        }
        $(this).next('.error').remove();
        ...
    Last edited by paul_wilkins; Feb 13, 2012 at 06:05.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes it worked first time thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •