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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form validation question

    Hello.

    I know less than nothing about Javascript.

    But I am would like to use it to validate a very simple form.

    The form contains a few text boxes, a drop-down menu and one checkbox. I need all of these completed/ticked before the form is submitted.

    Could someone tell me either :
    a) how I do this
    b) where the best place to learn how to do this is

    Grateful for any help. Thankyou.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a nice little form validator script for you. It validates all form elements, inputs, selects and textareas, also radio button groups and checkboxes:


    Code:
    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript">
    // form validator by Justin Case
    
    function alertField(form, f){
       var fname;
       if(typeof(f) == 'string') fname = f;
       else fname = f.name;
       fname = fname.charAt(0).toUpperCase() + fname.substring(1, fname.length);
       alert('Please enter a value in '+fname);
       if(typeof(f) !== 'string'){
           f.focus();
           return false;
       }
       for(var i = 0; i < form.elements.length; i++){
           if(form.elements[i].name && form.elements[i].name == f){
               form.elements[i].focus();
               return false;
           }
       }
    }
    
    function validateForm(form){
       var radioGroups = new Array();
       for(var i = 0; i < form.elements.length; i++){
           if((form.elements[i].tagName.toLowerCase() == 'select' ||
           form.elements[i].tagName.toLowerCase() == 'textarea' ||
           (form.elements[i].tagName.toLowerCase() == 'input' &&
           (form.elements[i].type.toLowerCase() == 'text' ||
           form.elements[i].type.toLowerCase() == 'file'))) &&
           form.elements[i].className.indexOf('notRequired') < 0 &&
           form.elements[i].value == ''){
               alertField(form, form.elements[i]);
               return false;
           }
           else if(form.elements[i].className.indexOf('checkEmail') >= 0 &&
           form.elements[i].value !== '' &&
           form.elements[i].value.match(/^([\w\-]+\.?)+\@([\w\-]+\.{1})+(com|net|org|edu|int|mil|gov|biz|info|aero|museum|name|coop|\w{2})$/) == null){
               alert('Please enter a valid email address.');
               form.elements[i].focus();
               return false;
           }
           else if(form.elements[i].tagName.toLowerCase() == 'input' &&
           form.elements[i].type.toLowerCase() == 'checkbox' &&
           form.elements[i].className.indexOf('notRequired') < 0 &&
           !form.elements[i].checked){
               alert('You need to agree to our TOS.');
               form.elements[i].focus();
               return false;
           }
           else if(form.elements[i].tagName.toLowerCase() == 'input' &&
           form.elements[i].type.toLowerCase() == 'radio' &&
           !radioGroups[form.elements[i].name] &&
           radioGroups[form.elements[i].name] !== null &&
           form.elements[i].className.indexOf('notRequired') < 0){
               var t = (form.elements[i].checked)? true : null;
               radioGroups[form.elements[i].name] = t;
           }
           else if(form.elements[i].tagName.toLowerCase() == 'input' &&
           form.elements[i].type.toLowerCase() == 'radio' &&
           (radioGroups[form.elements[i].name] ||
           radioGroups[form.elements[i].name] == null) &&
           form.elements[i].className.indexOf('notRequired') < 0){
               if(form.elements[i].checked) radioGroups[form.elements[i].name] = true;
           }
       }
       for(var i in radioGroups){
           if(!radioGroups[i]){
               alertField(form, i);
               return false;
           }
       }
       return true;
    }
    
    </script>
    </head>
    <body>
    
    <form method="post" action="about:blank" onsubmit="return validateForm(this);">
    NAME:  <input type="text" name="name"><br>
    EMAIL: <input type="text" name="email" class="checkEmail"><br>
    SUBJECT: <input type="text" name="subject"><br>
    COMMENT:<br><textarea cols="44" rows="12" name="comments"></textarea><br>
    
    OPINION:<br><input type="radio" name="opinion" value="good"> Good<br>
    <input type="radio" name="opinion" value="ok"> Ok<br>
    <input type="radio" name="opinion" value="bad"> Bad<br><br>
    
    AGREE TO TOS: <input type="checkbox" name="tos"><br><br>
    
    <input type="submit" value="Send">
    <input type="reset" value="Reset">
    </form>
    
    </body>
    </html>
    If some field isn't required, add class="notRequired" to its tag. If it is an email field and you would like the email address validated, add class="checkEmail" to it. If you want both, not required and address check, use class="notRequired checkEmail". Use the notRequired class name on a checkbox if you don't require it checked. If you don't require any value chosen in a radio group, add the notRequired class name to every radio group item.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    The principle is this
    Use onsubmit as event handler, call a verify function with a return condition, focus the element and return false if the condition is/is not fulfiled, elese return true

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    script>
    function 
    verify(f){
    e=f.elements;
    for(var 
    i=0;i<e.length;i++){

    if(
    e[i].type=='text'){
        if(
    e[i].value==''){
        
    alert('You must enter some value in the text field');
        
    e[i].focus();
        return 
    false
        
    }
    }

    if(
    e[i].name=='sel'){
        if(
    e.selectedIndex==0){
        
    alert('You must select a value in select field');
        
    e[i].focus();
        return 
    false
        
    }
    }
    if(
    e[i].type=='checkbox'){
        if(!
    e[i].checked){
        
    alert('You must check the checkbox');
        return 
    false
        
    }
    }
    }
    return 
    true
    }
    </script>
    </head>

    <body>
    <form onsubmit="return verify(this)">
    <input type="text"><br>
    <input type="text"><br>
    <select name="sel">
        <option>--select--</option>
        <option>one</option>
        <option>two</option>
      </select><br>
    <input type="checkbox" value=""><br>
      <input name="Submit" type="submit" value="Submit">
    </form>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Willy Duitt -

    thankyou so much.

    That is exactly - I mean exactly - what I was looking for.

    At least now I can read through it and try to start understand how it all works.

    Thanks again.


  •  

    Posting Permissions

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