SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form minimum letters

    i have a form input box and for the validation how can i make a minimum and maximum characters to input into the input box:

    example if i dont type anything and press submit i get an alert message saying minimum 1 character and maximum characters is 16 and if i type more than 16 characters long i get the same alert message?
    Animated Chatrooms - www.121chatrooms.net

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    For this, you will need to use an onchange event handler on your text input box. The event should run a function that checks the number of characters in the box and, if they are > 16 or it is empty, you alert() your message.

    Have a go at this and if you get stuck, ask for more help.

  3. #3
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <!DOCTYPE html>
    <html>
    <head>
    <title>validation</title>
    <script type="text/javascript">
    window.onload = function() {
    var form = document.getElementById('contact');
    var inputs = form.getElementsByTagName('*');
    form.onsubmit = function() {
    for (var i=0, l=inputs.length; i<l; i++) {
    if (inputs[i].className &&
    inputs[i].className.indexOf('textfield') != -1) {
    if (inputs[i].value.length < 1) {
    alert('need more than 1 char');
    } else if ( inputs[i].value.length > 16) {
    alert('max is 16');
    } else {
    return true;
    }
    return false;
    }
    }
    }
    }
    </script>
    </head>

    <body>
    <form id="contact">
    <label for="who">Who/label><input id="who" name="who" type="text" class="textfield">

    <input type="submit" value="submit">
    </form>
    </body>
    </html>
    This should work. It relies on the 'textfield' class being there, so you wont have to keep checking for IDs if you'll have multiple.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    SoulScratch, instead of checking for a class of "textfield" you could do away with the class name and simply check for a type attribute of "text".

  5. #5
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True, but with classes you have more control. What if it's a phone number? It would also have an attribute value of 'text' for the 'type' attribute. I usually deal with forms that have more than 5 fields. Maybe you can assume all the input elements that have a type of text should be checked in a small, simple form... but I prefer to make mine as 'bulletproof' as possible.
    Last edited by SoulScratch; Feb 16, 2008 at 16:04.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Fair enough.


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
  •