Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    All round form validator

    I was wanting to develop a script that will validate text fields and radio buttons in the same function, without the overlap in code.

    Please help

    mmasci

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't be reluctant - feel free to post how far you've come.

    If it helps, you can pass a reference to the entire form as a parameter to the validating function. Say for instance that your function is called validator, then you'd have

    Code:
    function validator(formRef) {
        // formRef does now point to the form we're validating
       if (formRef.elements["shippingTime"].value) {
           // etc. pp.
       }
    }
    and call it from somewhere in the HTML like this

    <form name="myForm" onsubmit="return validator(this)">

    The "this" keyword points now at your form myForm, and you can work upon its various input elements. Hope that helps and did not confuse you anymore.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    A stripped-down version, but might help. You can add more checks, as desired.

    Code:
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    var msg = new Object(); //prompts, indexed by field name
    msg['sample1'] = 'Sample 1?';
    msg['sample2'] = 'Sample 2?';
    msg['more'] = 'Punch a "more" radio, dude!';
    msg['extra'] = 'Type in something extra, please.';
    
    function checkform(f) {
    var el, e = 0;
    while (el = f.elements[e++]) {
    switch (el.type) {
    case 'text' :
    case 'textarea' :
    if (!el.value) {
    alert(msg[el.name]);
    el.focus();
    return false;
    }
    break;
    case 'radio' :
    var rad, r = -1, grp = f[el.name];
    while (rad = grp[++r]) if (rad.checked) break;
    if (r == grp.length) {
    alert(msg[el.name]);
    el.focus();
    return false;
    } 
    else e += grp.length-1;
    break;
    }
    }
    return true;
    }
    
    </script>
    </head>
    <body>
    <form action="javascript&#58;alert('Submitted !')" method="post" 
    onsubmit="return checkform(this)">
    <input name="sample1" type="text"> sample 1<br>
    <input name="sample2" type="text"> sample 2<br><br>
    <input name="more" type="radio"> more<br>
    <input name="more" type="radio"> lots more<br><br>
    <input name="extra" type="text"> extra<br><br>
    <input type="submit" value="DONE">
    </form>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Jul 2002
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Non required fields

    This script is great!!

    But what if I have some fields in the form that are not required fields and may not need a response from the user??

    How can this script be modified to accomodate this possibility??

    Cheers,

    mmasci

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    you can append "_required" in the element's name that is required.
    i modified adios' code to illustrate what i mean...

    Code:
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    var msg = new Object(); //prompts, indexed by field name
    msg['sample1_required'] = 'Sample 1?';
    msg['sample2_required'] = 'Sample 2?';
    msg['more_required'] = 'Punch a "more" radio, dude!';
    msg['extra'] = 'Type in something extra, please.';
    
    function checkform(f) {
    var el, e = 0;
    while (el = f.elements[e++]) {
    if (el.name.indexOf("_required")==-1) continue;
    switch (el.type) {
    case 'text' :
    case 'textarea' :
    if (!el.value) {
    alert(msg[el.name]);
    el.focus();
    return false;
    }
    break;
    case 'radio' :
    var rad, r = -1, grp = f[el.name];
    while (rad = grp[++r]) if (rad.checked) break;
    if (r == grp.length) {
    alert(msg[el.name]);
    el.focus();
    return false;
    } 
    else e += grp.length-1;
    break;
    }
    }
    return true;
    }
    
    </script>
    </head>
    <body>
    <form action="javascript&#58;alert('Submitted !')" method="post" 
    onsubmit="return checkform(this)">
    <input name="sample1_required" type="text"> sample 1<br>
    <input name="sample2_required" type="text"> sample 2<br><br>
    <input name="more_required" type="radio"> more<br>
    <input name="more_required" type="radio"> lots more<br><br>
    <input name="extra" type="text"> extra<br><br>
    <input type="submit" value="DONE">
    </form>
    </body>
    </html>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    glenngv fan here...but...

    Don't do it this way. It interferes with the naming of the fields - significant for cgi/server processes - and, anyway, it's unnecessary:

    http://www.codingforums.com/showthre...?threadid=2927

    No ego here, stole this idea from D. Flanagan


  •  

    Posting Permissions

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