SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help Validate Radio Buttons in Existing Code

    Hi. I'm no pro at JS, but most times can muck my way though tweaking exsisting code - except for this. I need to validate [as in none selected] a set of radio buttons on a form:

    Code:
    <form name="form2" method="post" action="processform.php" onSubmit="return validate.check()">
    
    <input type="radio" name="radio" id="yes" value="pickup" onBlur="trim('pickup')" /> 
    Yes.</td>
    <td width="55%"><input type="radio" name="radio" id="usps" value="no" onBlur="trim('usps')" /> 
    No.</td>
    This is the JS Validation Code I found online and that I'm using but it only validates text fields, not radio buttons:

    Code:
    function $$(id) {
    try {
    var tmp = document.getElementById(id).value;
    }
    catch(e) {
    alert("Field " + id + " does not exist!\nvalidation is configured on a field with no ID");
    return false;
    }
    if(tmp == "") {
    alert("Field " + id + " cannot be empty");
    return false;
    }
    return tmp;
    }
    
    var required = {
    field : [],
    add : function(name, type) {
    this.field[this.field.length] = [name,type];
    },
    out : function() {
    return this.field;
    }
    }
    
    var validate = {
    
    check : function() {
    var tmp;
    // loop all required fields
    for(var i=0; i<required.field.length; i++) {
    // check the form field exists
    this.tmp = $$(required.field[i][0]);
    if(this.tmp) {
    if(this.checkit(required.field[i][0],required.field[i][1])) {
    // validated okay
    } else {
    alert("Field "+required.field[i][0]+" not valid\n");
    document.getElementById(required.field[i][0]).focus();
    return false;
    }
    } else {
    try {
    document.getElementById(required.field[i][0]).focus();
    } catch(e) { }
    return false;
    }
    } // for
    return true;
    },
    
    checkit : function(value,type) {
    exp : '';
    switch(type) {
    
    case "NOT_EMPTY":
    if(this.trim($$(value)).length < 1) { return false; } else { return true; }
    break;
    
    case "ALPHA":
    exp = /^[A-Za-z]+$/;
    if($$(value).match(exp)==null) { return false; } else { return true; }
    break;
    
    case "ALPHASPACE":
    exp = /^[A-Za-z ]+$/;
    if($$(value).match(exp)==null) { return false; } else { return true; }
    break;
    
    case "NUMERIC":
    exp = /^[0-9]+$/;
    if($$(value).match(exp)==null) { return false; } else { return true; }
    break;
    
    case "NUMERICPLUS":
    exp = /(^-*\d+$)|(^-*\d+\.\d+$)/;
    if($$(value).match(exp)==null) { return false; } else { return true; }
    break;
    
    case "ALPHANUM":
    exp = /^[a-zA-Z0-9]+$/;
    if($$(value).match(exp)==null) { return false; } else { return true; }
    break;
    
    case "ALPHANUMSPACE":
    exp = /^[a-zA-Z0-9 ]+$/;
    if($$(value).match(exp)==null) { return false; } else { return true; }
    break;
    
    case "EMAIL":
    exp = /^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if($$(value).match(exp)==null) { return false; } else { return true; }
    break;
    
    case "YYYYMMDD":
    exp = /^(19|20)[0-9][0-9][- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
    if($$(value).match(exp)==null) { return false; } else { return true; }
    break;
    
    case "DDMMYYYY":
    exp = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)[0-9][0-9]$/;
    if($$(value).match(exp)==null) { return false; } else { return true; }
    break;
    
    case "MMDDYYYY":
    exp = /^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)[0-9][0-9]$/;
    if($$(value).match(exp)==null) { return false; } else { return true; }
    break;
    
    default:
    exp = new RegExp(type);
    if($$(value).match(exp)==null) { return false; } else { return true; }
    } // switch
    },
    trim : function(s) {
    return s.replace(/^\s+/, '').replace(/\s+$/, '');
    }
    
    }
    function $val(id) {
    return document.getElementById(id);
    }
    function trim(id) {
    $val(id).value = $val(id).value.replace(/^\s+/, '').replace(/\s+$/, '');
    }
    Can someone please, please, please tell me what and where to add the validation for radio buttons? Should my form include 'onBlur' for radio buttons? BTW, I'm using PHP to process the form. Thanks so much.

  2. #2
    SitePoint Member
    Join Date
    May 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code below isn't perfect but should explain you the basics of event handling and retrieving form values. Hope I understood your problem and it helps

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset="utf-8">
      <title>validate</title>
      <script type="text/javascript">
        function validate(evt){
          if (evt.target.radio[0].checked) alert('yes');
          else if (evt.target.radio[1].checked) alert('no');
          else {
            alert('choose your destiny');
            alert(evt);
            return false;
          }
        };
      
      </script>
      </head>
      <body>
        <form name="form2" method="post" action="#" onSubmit="validate(event)">
    
        <input type="radio" name="radio" id="pickup" value="yes" /> 
          Yes.
        <input type="radio" name="radio" id="usps" value="no" /> 
          No.
        <input type="submit" value="submit">
        </form>
      </body>
    </html>


Tags for this Thread

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
  •