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

    Question JavaScript Programming help - Form Validation

    Hi there,
    I'm new to HTML and JavaScript and I've been given a task validate and create a Student Examination form. I've researched a lot yet I still have the same problems which are: 1. I am meant to restrict the examination number input to exactly 4 numbers in length but when I try it produces an alert box when 4 numbers aren't entered but still shows this alert box after I enter exactly 4 numbers. 2. I need to create a confirmation alert box that shows the Radio Button selection you made and let you confirm whether that was your choice, I have tried this yet it still does not seem to work.
    Here is my code:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Exam entry</title>
    <script language="javascript" type="text/javascript">
    function validateForm() {
    var result = true;
    var msg="";
    if (document.ExamEntry.name.value=="") {
    msg+="You must enter your name \n";
    document.ExamEntry.name.focus();
    document.getElementById('name').style.color="red";
    result = false;
    }
    if (document.ExamEntry.subject.value=="") {
    msg+="You must enter the subject \n";
    document.ExamEntry.subject.focus();
    document.getElementById('subject').style.color="red";
    result = false;
    }
    if (document.ExamEntry.examnum.value=="") {
    msg+="You must enter an examination number \n";
    document.ExamEntry.examnum.focus();
    document.getElementById('examnum').style.color="red";
    result = false;
    }
    if (examnum.length!==4) {
    msg+="Your examiation number must be four numbers long \n";
    document.ExamEntry.examnum.focus();
    document.getElementById('examnum').style.color="red";
    result = false;
    }
    if(msg==""){
    return result;
    }
    {
    alert(msg)
    return result;
    }
    }
    function validateLevel() {
    var chosen="";
    var resultt = true;
    var display=confirm("Do you really want to go to" chosen "?");
    chosen=document.ExamEntry.level[i].value;
    if (display==true) {
    return resultt;
    }
    else {
    resultt = false;
    return resultt;
    }
    function RunFunctions() {
    validateForm();
    validateLevel();
    }
    </script
    </head>
    
    <body>
    <h1>Exam Entry Form</h1>
    <form name="ExamEntry" id="ExamEntry" method="post" action="success.html" >
    <table width="50%" border="0">
    <tr>
    <td id="name">Name</td>
    <td><input type="text" name="name" /></td>
    </tr>
    <tr>
    <td id="subject">Subject</td>
    <td><input type="text" name="subject" /></td>
    </tr>
    <tr>
    <td id="examnum">Examination Number</td>
    <td><input type="number" id="examnum" name="examnum"></td>
    </tr>
    <tr>
    <td id="level">Level of Subject:</td>
    </tr>
    <tr>
    <td id="GCSE">GCSE:</td>
    <td><input type="radio" id="levelGCSE" name="level" value="GCSE"></td>
    </tr>
    <tr>
    <td id="AS">AS:</td>
    <td><input type="radio" id="levelAS" name="level" value="AS"></td>
    </tr>
    <tr>
    <td id="A2">A2:</td>
    <td><input type="radio" id="levelA2" name="level" value="A2"></td>
    </tr>
    <tr>
    <td><input type="submit" name="Submit" value="Submit" onclick="return RunFunctions" /></td>
    <td><input type="reset" name="Reset" value="Reset" /></td>
    </tr>
    </table>
    </form>
    </body>
    Thanks for any help you have to offer,
    Nathan.
    Last edited by VIPStephan; 06-19-2013 at 12:07 AM. Reason: fixed code BB tag

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    You might want to post this in the javascript forum. But where you check the length of the number, you want "!=" and not "!==".
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by jerry62704 View Post
    But where you check the length of the number, you want "!=" and not "!==".
    You should never use == and != in JavaScript unless you know exactly what you are doing and are using it as a part of a test for a type conversion.

    You should almost always use === and !== (always if you are a beginner to JavaScript).

    Also alert() is for debugging only. You need to remove them all from your code before it goes live. Error messages you expect visitors to see should be inserted into the page itself.

    Testing for equal to "" is pointless as they can enter anything to bypass that error. At the very least you ought to trim any leading and trailing spaces from the input before performing that test.

    For radio buttons you need to set up a loop to check each button in turn to see which one has its selected property true.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    This is bogus:
    Code:
    <td id="examnum">Examination Number</td>
    <td><input type="number" id="examnum" name="examnum"></td>
    ID's must be UNIQUE on a page. You have both a <td> and an <input> with the same id. But what possible reason is there to put an ID on the <input>, in any case?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    This is also bogus:
    Code:
    <form name="ExamEntry" id="ExamEntry" method="post" action="success.html" >
    Unless you are using URL rewriting, at least.

    You cannot POST data to an HTML page. You can only POST data to server-side code: PHP/ASP/JSP/etc.

    If the action= of your <form> is truly to be another HTML page, then you *MUST* use method="get"
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    This is bogus on two levels:
    Code:
        <td><input type="submit" name="Submit" value="Submit" onclick="return RunFunctions" /></td>
    (1) to call a JS function from an event handler, you *MUST* use parens after the function name:onclick="return RunFunctions()"

    (2) In any case, since the form *MIGHT* get submitted by the user hitting the ENTER key, it's kind of pointless to attach your validation to a submit button. Instead, attach it to the onsubmit event for the <form> tag.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    It's a very bad idea to use a name= and an id= that are the same.

    MSIE, for example, promotes all names to ids, automatically, so you can have conflicts you aren't aware of.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    Another piece of bogus code:
    Code:
    var display=confirm("Do you really want to go to" chosen "?");
    You are missing the + operator between the pieces of the string concatenation:
    Code:
    var display=confirm("Do you really want to go to " + chosen + "?");
    By the by, confirm() is just as obsolete as alert() and should really be avoided.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    Here's a somewhat cleaned up version.

    It is still using confirm( ) call, which you really should not do.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Exam entry</title>
    </head>
    
    <body>
    <h1>Exam Entry Form</h1>
    <div id="Error" style="color: red; font-size: large;"></div>
    <br/>
    <form id="ExamEntry" method="get" action="success.html" >
    <table width="50%" border="0">
    <tr>
        <td id="Name">Name</td>
        <td><input type="text" name="name" /></td>
    </tr>
    <tr>
        <td id="Subject">Subject</td>
        <td><input type="text" name="subject" /></td>
    </tr>
    <tr>
        <td id="Examnum">Examination Number</td>
        <td><input type="text" name="examnum"></td>
    </tr>
    <tr>
        <td id="level">Level of Subject:</td>
    </tr>
    <tr>
        <td id="GCSE">GCSE:</td>
        <td><input type="radio" name="level" value="GCSE"></td>
    </tr>
    <tr>
        <td id="AS">AS:</td>
        <td><input type="radio" name="level" value="AS"></td>
    </tr>
    <tr>
        <td id="A2">A2:</td>
        <td><input type="radio" name="level" value="A2"></td>
    </tr>
    <tr>
        <td><input type="submit" name="Submit" value="Submit" /></td>
        <td><input type="reset" value="Reset" /></td>
    </tr>
    </table>
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("ExamEntry");
    
    function trimValue(fldName)
    {
        return form[fldName].value.replace(/^\s+/,"").replace(/\s+$/,"");
    }
        
    form.onsubmit = function ( ) 
    {
        var msg="";
        var oops;
        oops = trimValue("name").length < 3;
        if ( oops )
        {
            msg += "You must enter your name <br/>";
            form.name.focus();
        }
        document.getElementById('Name').style.color = oops ? "red" : "black";
    
        oops = trimValue("subject").length < 5;
        if ( oops )
        {
            msg+="You must enter the subject <br/>";
            form.subject.focus();
        }
        document.getElementById('Subject').style.color = oops ? "red" : "black";
    
        oops = ! ( /^\d{4}$/ ).test( trimValue("examnum") );
        if ( oops )
        {
            msg+="You must enter a 4-digit examination number <br/>";
            form.examnum.focus();
        }
        document.getElementById('Examnum').style.color = oops ? "red" : "black";
    
        // any errors?
        document.getElementById("Error").innerHTML = msg;
        if ( msg != "" )
        {
            return false; // don't allow submit to occur
        }
    
        // one last check:  make sure user wants to change level
        var chosen="";
        var rbs = form.level;
        for ( var r = 0; r < rbs.length; ++r )
        {
            if ( rbs[r].checked ) chosen = rbs[r].value;
        }
        if ( chosen != "" )
        {
            return confirm("Do you really want to go to " + chosen + "?");
        }
        return true;
    }
    </script>
    </body>
    </html>
    Last edited by Old Pedant; 06-19-2013 at 01:03 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,150
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by Old Pedant View Post
    It's a very bad idea to use a name= and an id= that are the same.

    MSIE, for example, promotes all names to ids, automatically, so you can have conflicts you aren't aware of.
    I have to say that I do not agree, That was a MSIE bug which had gone by IE6. I always use the same designation for the name and the id (of the same element of course). How can that create a conflict? I consider it good practice to have a name and id for each form element. But not of course using the same word as the name for one element and the id of another, which is what the OP is doing.

    What is also very undesirable is to use the same name/id for an HTML element and a Javascript variable.

    name="name"
    I think you should avoid giving names or id's to variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.

    I myself would never use two names/ids which differed only in case - , Name and name, Subject and subject. Bound to cause grief!
    Last edited by Philip M; 06-19-2013 at 08:10 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    No disagreement, Philip.

    But he was using the same ID for *DIFFERENT* elements!

    Look here, for example:
    Code:
    <td id="name">Name</td>
    <td><input type="text" name="name" /></td>
    Surely you would consider that bad practice?

    I solved it by just upper casing the first letter of each of the IDs that conflicted.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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