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

    How can I validate a form using JavaScript?

    I am attempting to create a form and validate it using a JavaScript file. I would like the form to reject any name that is not a character, however,include hyphens. The accepted age has to be between 18-110. When all is correct, I want the form to submit. However, the form is submitting whatever I type. What do I have wrong?

    PHP file
    <head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <title>Study Guides</title>
    </head>
    <body>
    <h2 align="center">A Simple Table for Certification Preparation</h2>
    <center>
    <form onsubmit='return checkForm();'>
    <label>
    <p>Name: <input type="text" size="32" id="name" onblur='chkName();' />
    </label>
    <label>
    Age: <input type="text" size="4" id="age" onblur='chkAge();'<small>(between 18 and 110)</small></p>
    </label>

    <table border="1">

    <tr><th>Selection</th> <th>Book</th> <th>Image</th> <th>Description</th> <th>Unit Price</th></tr>

    <tr>
    <td> <p> <label> <input type = "radio" name = "price" value = "$34.13" checked = "checked" /></label></p></td>
    <td>CompTIA A+</td>
    <td><img src = "images/A+.jpeg" height = "150" width = "100" alt= "Picture of CompTIA A+ Book"/></td>
    <td>The CompTIA A+ certification is the starting point for a career in IT. The exam covers maintenance of PCs, mobile devices, laptops, operating systems and printers.</td>
    <td>$34.13</td>
    </tr>

    <tr>
    <td> <p> <label> <input type = "radio" name = "price" value = "$31.16" checked = "checked" /></label></p></td>
    <td>CompTIA Network+</td>
    <td><img src = "images/Network+.jpeg" height = "150" width = "100" alt= "Picture of CompTIA Network+ Book"/></td>
    <td>The exam covers network technologies, installation and configuration, media and topologies, management, and security. Candidate job roles include network administrator, network technician, network installer, help desk technician and IT cable installer.</td>
    <td>$31.16</td>
    </tr>

    <tr>
    <td> <p> <label> <input type = "radio" name = "price" value = "$29.08" checked = "checked" /></label></p></td>
    <td>CompTIA Security+</td>
    <td><img src = "images/Security+.jpeg" height = "150" width = "100" alt= "Picture of CompTIA Security+ Book"/></td>
    <td>CompTIA Security+ not only ensures that candidates will apply knowledge of security concepts, tools, and procedures to react to security incidents, it ensures that security personnel are anticipating security risks and guarding against them.</td>
    <td>$29.08</td>
    </tr>

    <tr>
    <td> <p> <label> <input type = "radio" name = "price" value = "$35.17" checked = "checked" /></label></p></td>
    <td>CompTIA Linux+</td>
    <td><img src = "images/Linux+.jpeg" height = "150" width = "100" alt= "Picture of CompTIA Linux+ Book"/></td>
    <td>CompTIA Linux+ Powered by LPI is a high-stakes, vendor-neutral certification that validates the fundamental knowledge and skills required of junior Linux administrators.</td>
    <td>$35.17</td>
    </tr>

    <tr>
    <td> <p> <label> <input type = "radio" name = "price" value = "$31.50" checked = "checked" /></label></p></td>
    <td>Cisco CCNA</td>
    <td><img src = "images/CCNA.jpeg" height = "150" width = "100" alt= "Picture of Cisco CCNA Book"/></td>
    <td> The CCNA Routing and Switching validates the ability to install, configure, operate, and troubleshoot medium-size routed and switched networks.</td>
    <td>$31.50</td>
    </tr>
    </table>

    <form action = "">
    <p>
    <input type = "submit" value = "submit" />
    <input type = "reset" value = "reset" />
    </p>
    </form>

    <a href= "Home.php">Back to Home</a><br />
    <script type = "text/javascript" src = "catalog.js" >
    </script>
    </p>
    </form>
    </center>
    </body>
    </html>

    Javascript File
    function checkForm()
    {
    var name= document.getElementById("name").value;
    var age= document.getElementById("age").value;
    }
    function chkName()
    {
    var name= document.getElementById("name")
    pos= name.value.search(/^[A-Z][a-z]+ ?[A-Z][a-z]\-?$/);
    if(pos !=0) {
    alert("Invalid name")
    return false;
    }
    else
    {
    return true;
    }
    }

    function chkAge()
    {
    var age= parseInt(document.getElementById("age").value);
    if(age <18)||(age>110){
    alert("Invalid age");
    return false;
    }
    else
    {
    return true;
    }
    }

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    The most blatantly obvious problem is that you have a nested form.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,986
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Code:
    function checkForm()
    {
    var name= document.getElementById("name").value;
    var age= document.getElementById("age").value;
    }
    This function does nothing. You should use
    <form action = "" onsubmit = "return checkForm()">
    and add the necessary validation to the function. as Logic Ali says, you may have only one form tag.


    A proper name may also include a space and an apostrophe - Peter O'Reilly.

    var name= document.getElementById("name")
    It is a bad idea to use the same word for an HTML element and a Javascript variable. You should also avoid giving names or id's to your 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'.

    alerts are obsolete as a method of displaying a message to your users. Prefer to use DOM methods.

    He has learnt that if you play with fire then you risk getting bitten. - Commentator Radio 5 Live
    Last edited by Philip M; 06-22-2013 at 07:42 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.


  •  

    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
    •