SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Validation

    Hey,

    I am trying to work out a way to validate the following page: http://www.loumolloy.com/testing.php

    On page load a survey will appear, you will see "Step1..2..3" at the top. Now users should not be able to get to the next step unless they have filled in all the fields.. In this case it is simply radio buttons for question 1 and 2.

    I have put together the following function to validate the boxes but it does not work properly, if i select female i get the wrong error. It's like it only validates correctly if i check the first radio button?

    Anyway, this is the function:

    PHP Code:
    function validate_page_1()
    {
        if(
    document.getElementById('input-1').checked != true)
        {
         
    alert('You missed out question 1.');
        } 
        if(
    document.getElementById('input-2').checked != true) {
         
    alert('You missed out question 2.');
        } else {
        
    document.getElementById('page-1').style.display='none';
        
    document.getElementById('page-2').style.display='block';
        }

    If you view source on the page you will see that on this line:
    PHP Code:
     <input type="submit" class="button-next right" name="btnnext" value="" onclick="validate_page_1()"/> 
    I trigger the validation, and it does pick it up but i don't know why it's not doing it properly..

    Can anyone help?

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've changed the function to this just making it more readable..

    PHP Code:
    function validate_page_1()
    {
        if(
    document.getElementById('gender').checked != true)
        {
         
    alert('You missed out question 1.');
        } 
        if(
    document.getElementById('age').checked != true) {
         
    alert('You missed out question 2.');
        } else {
        
    document.getElementById('page-1').style.display='none';
        
    document.getElementById('page-2').style.display='block';
        }

    Can anyone see where the problem is?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  3. #3
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,524
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    IDs should be unique. I noticed that you reuse IDs on the radio buttons.

    So, you can either specify a unique ID for each radio button and check through each one individually, or use getElementByName to get the set of radio buttons returned as an array.

    I've used a function like this in the past to check if a radio button has been selected within a set with the same name:

    Code:
        function isRBchecked(elementName){
            var jumper = document.getElementsByName(elementName);
            var elementValue = false;
            for(var j=0;j<jumper.length;j++){
                if(jumper[j].checked){
                    elementValue=true;
                }
            }
            return elementValue;
        }
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


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
  •