www.webdeveloper.com
Results 1 to 10 of 10

Thread: Validation - Select List

  1. #1
    Join Date
    Mar 2010
    Location
    Knoxville, TN
    Posts
    10

    Question Validation - Select List

    I have a validation script that checks only two fields: a textbox and a select option list. The textbox validation works just fine, but when I try to validate the select list, it will display the error message, but it will also submit. How can I fix my script so that it does not submit unless there are no error messages displayed? Here is what I have, and bear in mind, I am still very new to JavaScript and validation:

    Code:
    function checkForm() {
    
    name = document.getElementById("name").value;
    if (name == "") { document.getElementById("nameError").style.display = "inline";
    document.getElementById("name").select();
    document.getElementById("name").focus();
    return false;
    }
    
    class = document.getElementById("class").value;
    if (class == "choose") {
    document.getElementById("classError").style.display = "inline";
    document.getElementById("class").select();
    document.getElementById("class").focus();
    return false;
    }
    
    return true;
    And here is my simple form:

    Code:
    <form method="post" action="create.php"name="create" onSubmit="return checkForm();">
    <table>
    <tr>
    <td>Name:</td>
    <td><input type="text" id="name" name="name"/><div class=error id=nameError>* Please enter a character name.</div></td>
    </tr>
    <tr>
    <td>Class:</td>
    <td>
    <select name="class" id="class">
    <option id="choose" value="choose" selected="selected">Choose Class</option>
    <option id="fighter" value="fighter">Fighter</option>
    <option id="cleric" value="cleric">Cleric</option>
    <option id="mage" value="mage">Mage</option>
    <option id="sorcerer" value="sorcerer">Sorcerer</option>
    <option id="barbarian" value="barbarian">Barbarian</option>
    <option id="priest" value="priest">Priest</option>
    </select>
    <div class=error id=classError>* Please choose a character class.</div></td>
    </tr>
    <tr>
    <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">
    <input type="submit" value="Create Character" id="submit" />
    <input type="reset" value="Reset" id="reset" />
    </td>
    </tr>
    </table>
    </form>
    Can anyone please help?

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    You had variable names in your javascript that were the same as some of your name and id values in your html.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    script type="text/javascript">
    <!--
    function 
    checkForm() {
    name1 document.getElementById("name").value;
    if (
    name1 == "") { 
    document.getElementById("nameError").style.display "inline";
    //document.getElementById("name").select();
    document.getElementById("name").focus();
    return 
    false;
    }
    class1 document.getElementById("class").value;
    if (
    class1 == "choose") {
    document.getElementById("classError").style.display "inline";
    //document.getElementById("class").select();
    document.getElementById("class").focus();
    return 
    false;
    }
    return 
    true;
    }
    //-->
    </script>

    </head>
    <body>
    <form method="post" action="#"name="create" onSubmit="return checkForm();">
    <table>
    <tr>
    <td>Name:</td>
    <td><input type="text" id="name" name="name"/><div class=error id='nameError'>* Please enter a character name.</div></td>
    </tr>
    <tr>
    <td>Class:</td>
    <td>
    <select name="class" id="class">
    <option id="choose" value="choose" selected="selected">Choose Class</option>
    <option id="fighter" value="fighter">Fighter</option>
    <option id="cleric" value="cleric">Cleric</option>
    <option id="mage" value="mage">Mage</option>
    <option id="sorcerer" value="sorcerer">Sorcerer</option>
    <option id="barbarian" value="barbarian">Barbarian</option>
    <option id="priest" value="priest">Priest</option>
    </select>
    <div class='error' id='classError'>* Please choose a character class.</div></td>
    </tr>
    <tr>
    <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">
    <input type="submit" value="Create Character" id="submit" />
    <input type="reset" value="Reset" id="reset" />
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html> 

  3. #3
    Join Date
    Mar 2010
    Location
    Knoxville, TN
    Posts
    10

    :-(

    That is still not working...

    I changed both the variables names as well as the action to "#", as you did, but I am still getting the same results. The error messages display for both, but with the action changed to "#", the page simply resets, whereas with my action set to the page (create.php), it would send the user to the create.php page, but if you go back to the first page, you could see that the error message is displayed. You can also see it displayed for a split second before the page is redirected to the create.php page. Any other suggestions?

    I just want to make sure the user selects an option from the list, other than the pre-selected "Choose Class", which has a value of "choose".

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    The code I posted worked correctly in my IE8 and FF3.6

    To double check, I have copy and pasted the code I posted into another file and changed action="#" to action="createUser.php".

    The code still works ok in my browsers.

    The form is submitted only when both a name is entered and a class, other than 'choose', is selected.
    Then I get the url blah blah not found error message as expected since my .php file does not exist.


    What browser and version number are you using?


  5. #5
    Join Date
    Mar 2010
    Location
    Knoxville, TN
    Posts
    10

    ?

    FireFox 3.6.6. I don't know what the problem could be... I will try it again, re-pasting exactly as you have it. Okay, I must have missed something else, because when I pasted exactly what you had, it did in fact work. Thank you so much for the help and patience :-)
    Last edited by twilitegxa; 07-22-2010 at 12:24 AM.

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    you're welcome

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    <form method="post" action="#"name="create" onSubmit="return checkForm();">
    Should be a space between the attributes and, under an XHTML Doctype, events should be written in lowercase.
    Code:
    <form method="post" action="#" name="create" onsubmit="return checkForm();">
    Furthermore, under an XHTML Doctype, the HTML comments <!-- //--> within the JavaScript codes should be removed. They should be removed anyway, as they are medieval residues of the times when there were browsers without JavaScript interpreters.

    tirna, if you like to use the XHTML Doctype, you should learn to follow the strict XHTML syntax as well.
    Last edited by Kor; 07-22-2010 at 10:25 AM.

  8. #8
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by Kor View Post
    [code]
    tirna, if you like to use the XHTML Doctype, you should learn to follow the strict XHTML syntax as well.
    I assume you really meant to direct your opnion to everyone who uses XHTML and not me specifically

    If you take a few seconds to read the signature below my posts you will see that I clearly state that none of the code I post is passed through the validator.

    I am not on anyone's payroll here and so am under no more obligation to provide validated code than anyone else who posts code in these forums is.

    I do not by default provide validated code free of charge - and of course I have no intention of asking for or expect any payment for anything I post here.

    I do however provide validated code to paying clients.

    As long as the code I post meets the OP's requirements I am happy .

    Assuming the OP even cares whether the code is valid or not, they have the option to validate it themselves in their own time (and not mine) as I do not presume they are unable to do so.

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tirna View Post
    [B

    As long as the code I post meets the OP's requirements I am happy
    Agree, but unfortunately the OP says it does not. Obviously, as there were some errors.

    All I have to say, without offending you, is that you should be more carefully when coding. It is not a big deal to follow the standards

  10. #10
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by Kor View Post
    Agree, but unfortunately the OP says it does not. Obviously, as there were some errors.

    The OP said this:

    "FireFox 3.6.6. I don't know what the problem could be... I will try it again, re-pasting exactly as you have it. Okay, I must have missed something else, because when I pasted exactly what you had, it did in fact work. Thank you so much for the help and patience :-)"

    So it did work and it met the OP's requirements.

    All I have to say, without offending you, is that you should be more carefully when coding. It is not a big deal to follow the standards

    Thank you for your opinion, but as I said before I do not by default provide validated code free of charge and I am under no obligation to do so. I do follow the standards when providing validated code to paying clients.
    ..
    Last edited by tirna; 07-23-2010 at 04:52 AM.

Thread Information

Users Browsing this Thread

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

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