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
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My Validate Form Function... Doesn't validate.

    Hello all,

    I have a form that submits a POST request when data is submitted.

    A Servlet then processes this POST request and a JavaBean is used to make some calculations. The HTML response is not generated within the Servlet but instead I forward the request to a JSP to generate the response. - This all works fine, thankfully.

    However, I am stupidly suck trying to validate the form on the client side with a JavaScript function before the form is submitted. Here is my index.jps:

    Code:
    <%-- 
        Document   : index
        Created on : 19-Nov-2009, 13:41:30
        Author     : lk00043
    --%>
    
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/JavaScript">
                <!-- Start hiding JavaScript Statements
                function validateForm() {
    
                    var student;
                    var score1, score2, score3, score4;
    
                    student = document.getElementById('student');
                    s1 = document.getElementById('score1');
                    s2 = document.getElementById('score2');
                    s3 = document.getElementById('score3');
                    s4 = document.getElementById('score4');
    
                    score1 = parseInt(s1.value);
                    score2 = parseInt(s2.value);
                    score3 = parseInt(s3.value);
                    score4 = parseInt(s4.value);
    
                    if(student.value.length == 0) {                    
                        document.getElementById('StudentError1').innerHTML = " Enter a student name!";
                        return false;
                    }
    
                    if ((isNaN(score1)) || (score1 < 0) || (score1 > 100)) {
                        document.getElementById('Error1').innerHTML = " Enter a number between 0 and 100!";
                        return false;
                    }
    
                    if ((isNaN(score2)) || (score2 < 0) || (score2 > 100)) {                    
                        document.getElementById('Error2').innerHTML = " Enter a number between 0 and 100!";
                        return false;
                    }
    
                    if ((isNaN(score3)) || (score3 < 0) || (score3 > 100)) {                    
                        document.getElementById('Error3').innerHTML = " Enter a number between 0 and 100!";
                        return false;
                    }
    
                    if ((isNaN(score4)) || (score4 < 0) || (score4 > 100)) {
                        document.getElementById('Error4').innerHTML = " Enter a number between 0 and 100!";
                        return false;
                    }                
                }
                // End hiding JavaScript Statements -->
            </script>
            <title>Lab Class 7 - Task 2</title>
        </head>
        <body>
            <h1>Lab Class 7</h1>
            <form name="collectgrades" action="AssessGrades" method="POST" onSubmit="validateForm()" >
            Name of Student: <input type="text" name="student" id="student"/><span id="StudentError1"> </span><br />
            Presentation: <input type="text" name="score" id="score1"/><span id="Error1"> </span><br />
            Writing style: <input type="text" name="score" id="score2"/><span id="Error2"> </span><br />
            Technical content: <input type="text" name="score" id="score3"/><span id="Error3"> </span><br />
            Depth of analysis: <input type="text" name="score" id="score4"/><span id="Error4"> </span><br />
            Feedback:<select name="feedback" size="4" multiple="multiple">
                <option>"Could be better structured."</option>
                <option>"Depth of analysis is good."</option>
                <option>"Very advanced material."</option>
                <option>"Very well structured."</option>
                </select><br />
            <input type="submit" value="Submit" />
            </form>
        </body>
    </html>


    Regardless of whether incorrect input is given, the data is still POSTed to the server and calculated on or a Server Side error is given.

    Am I correct in calling the function onClick?

    The validation essentially needs to be so that:

    - Student field contains a string
    - Score1, Score2, Score3 and Score 4 contain a number between 0 and 100

    Any help is most appreciated,

    Cheers,

    Beetle.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,899
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    onSubmit=" return validateForm()"

    The <!-- and //--> comment (hiding) tags have not been necessary since IE3. If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.


    Passengers Hit By Cancelled Trains. - Woking News and Mail

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers mate solved!


  •  

    LinkBacks (?)


    Posting Permissions

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