www.webdeveloper.com
Results 1 to 10 of 10

Thread: How to validate a selected box with a button.

  1. #1
    Join Date
    Mar 2009
    Location
    Paterson, NJ, USA
    Posts
    25

    How to validate a selected box with a button.

    I'm not really sure how I would do this. I've looked at lots of tutorials on the web but they're all automatic validation for a whole form, i want a button to only validate when a user has the cursor in a selected input box. When they submit the button if it is empty it will say Please enter a number or something. I could do this for the whole form, but what I want is so that the selected text box is the only one that is validated.

    The second validation rule is to compare it against a set of numbers, I don't really have a clue how to do this

    In more depth:
    Say there are 5 input boxes. 3 of them have a number in them and 2 are blank e.g. 4,3,"",7,""

    What i would like to be able to do, is if I had a set of numbers that they should be e.g. 4,3,5,7,3 and for there to be a check button, that when submitted, would validate the selected input box. For example when the button is pressed if the selected box was empty it would say "please enter a number" (i would do this with an if else statement i think) e.g.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function input_check()
    if (ch == '')
    {
    alert("Please Enter A Number");
    }
    </script>
    </head>
    <body>
    <input type="text" size="2" value="4" id="N0">
    <input type="text" size="2" value="3" id="N1">
    <input type="text" size="2" value="" id="N2">
    <input type="text" size="2" value="7" id="N3">
    <input type="text" size="2" value="" id="N4">
    <input type="button" onclick="input_check()" value="Check" />
    
    </body>
    </html>
    Something along those lines. But if the incorrect number was entered it would say "Incorrect number" (it checks against the 5 numbers 43573). I think i might have to do something with focus so that is just says whether that specific input box is correct or not? I also don't know how i would check against these 5 numbers? I would like to be able to do this with larger lengths of numbers too.

    Please help me, I can't find any tutorials covering anything like this

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    function input_check() {
    var num='43573';
    var aInput=document.getElementsByName('n')
    for(var i=0; i<num.length; i++) {
        if(num[i]!=aInput[i].value) {
            alert("please enter a number");
            aInput[i].value='';
            aInput[i].focus();
            break;
            }
        }
    }
    </script>
    
    </head>
    <body>
    <form action="#" name="form1">
    <input type="text" size="2" value="4" name="n">
    <input type="text" size="2" value="3" name="n">
    <input type="text" size="2" value="" name="n">
    <input type="text" size="2" value="7" name="n">
    <input type="text" size="2" value="" name="n">
    <input type="button" onclick="input_check()" value="Check">
    </form>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Mar 2009
    Location
    Paterson, NJ, USA
    Posts
    25

    Thank you!!

    Thank you soooo much Fang! that's awesome! How would I make it so that only the box with the cursor currently in it is validated by the button? Or is that not possible? I want the user to be able to fill in the text boxes in any order and validate their latest entry as they go along. But yeah, thank you so much, it is such a big help!

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    window.onload=function() {
    var aInput=document.getElementsByName('n');
    for(var i=0; i<aInput.length; i++) {
        aInput[i].onblur=function (i) {
            return function (e) {
                input_check(this, i)
                };
            }(i);
        }
    };
    
    function input_check(obj, i) {
    var ERROR=false;
    var num='43573';
    if(i && num[i]!=obj.value) {
        ERROR=true;
        }
    else {
        var aInput=document.getElementsByName('n');
        for(var i=0; i<num.length; i++) {
            if(num[i]!=aInput[i].value) {
            	ERROR=true;
                obj=aInput[i];
                break;
                }
            }
        }
    if(ERROR) {
        alert("please enter a number");
        obj.value='';
        obj.focus();
        }
    }
    </script>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    input:focus {outline:1px dotted red;}
    </style>
    
    </head>
    <body>
    <form action="#" name="form1">
    <input type="text" size="2" value="4" name="n">
    <input type="text" size="2" value="3" name="n">
    <input type="text" size="2" value="" name="n">
    <input type="text" size="2" value="7" name="n">
    <input type="text" size="2" value="" name="n">
    <input type="button" onclick="input_check()" value="Check">
    </form>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Mar 2009
    Location
    Paterson, NJ, USA
    Posts
    25
    Thank you Fang! That's what i was looking for it seems to check even if I haven't pressed the button, any ideas what I would do to prevent that from happening? It also jumps after it has checked to the next empty box, would it be possible for it just to lose focus or deselect? It's so close to being perfect though! Thank you for your help Fang, I've been pondering over this for quite sometime, it is appreciated sooooo much!!

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    window.onload=function() {
    var aInput=document.getElementsByName('n');
    for(var i=0; i<aInput.length; i++) {
        aInput[i].onblur=function (i) {
            return function (e) {
                input_check(aInput, i)
                };
            }(i);
        }
    var controls=document.getElementsByTagName('input');
    controls[controls.length-1]. onclick=function() {input_check(aInput);};
    };
    
    function input_check(aInput, i) {
    var ERROR=false;
    var num='43573';
    if(i!=null) {
        if( num[i]!=aInput[i].value) {
            ERROR=true;
            }
        }
    else {
        for(var i=0; i<num.length; i++) {
            if(num[i]!=aInput[i].value) {
            	ERROR=true;
                break;
                }
            }
        }
    if(ERROR) {
        alert("please enter a number");
        aInput[i].value='';
        aInput[i].focus();
        }
    }
    </script>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    input:focus {outline:1px dotted red;}
    </style>
    
    </head>
    <body>
    <form action="#" name="form1">
    <input type="text" size="2" value="4" name="n">
    <input type="text" size="2" value="3" name="n">
    <input type="text" size="2" value="" name="n">
    <input type="text" size="2" value="7" name="n">
    <input type="text" size="2" value="" name="n">
    <input type="button" value="Check">
    </form>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    Mar 2009
    Location
    Paterson, NJ, USA
    Posts
    25
    You are an absolute star Fang!!! You are so helpful and kind helping me out! Thank you so much that is perfect. I hope you have a good weekend, take care

  8. #8
    Join Date
    Mar 2009
    Location
    Paterson, NJ, USA
    Posts
    25
    Is there anyway I could make it so it only validates the cell when the button is clicked? At the moment it automatically comes up with a warning even if I haven't pressed the button. I tried changing some bits of code but I couldn't get it to only validate the cell if the button is pressed. Any ideas? Sorry for being a pain thanks.

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    window.onload=function() {
    var aInput=document.getElementsByName('n');
    for(var i=0; i<aInput.length; i++) {
        aInput[i].onfocus=function() {this.focused=true; blurred(this, aInput)};
        }
    var controls=document.getElementsByTagName('input');
    controls[controls.length-1]. onclick=function() {input_check(aInput);};
    };
    
    function blurred(obj, aInput) {
    for(var i=0; i<aInput.length; i++) {
        if(aInput[i]!=obj) {aInput[i].focused=false;}
        }
    }
    
    function input_check(aInput, i) {
    var ERROR=false;
    var CHECKED=false;
    var num='43573';
    for(var i=0; i<num.length; i++) {
    if(aInput[i].focused) {
        if(num[i]!=aInput[i].value) {
            ERROR=i;
            }
        else {
            aInput[i].focused=false;
            }
        CHECKED=true;
        break;
        }
    else {
        if((ERROR==false && !CHECKED) && num[i]!=aInput[i].value) {
            ERROR=i;
            }
        }
    }
    if(ERROR!==false) {
        alert("please enter a number");
        aInput[ERROR].value='';
        aInput[ERROR].focus();
        }
    }
    </script>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    input:focus {outline:1px dotted red;}
    </style>
    
    </head>
    <body>
    <form action="#" name="form1">
    <input type="text" size="2" value="4" name="n">
    <input type="text" size="2" value="3" name="n">
    <input type="text" size="2" value="" name="n">
    <input type="text" size="2" value="7" name="n">
    <input type="text" size="2" value="" name="n">
    <input type="button" value="Check">
    </form>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  10. #10
    Join Date
    Mar 2009
    Location
    Paterson, NJ, USA
    Posts
    25
    Thank you! I cannot thank you enough, it has truly made so much difference to me. Thank you for the continued help cya Fang!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles