www.webdeveloper.com
Results 1 to 14 of 14

Thread: Input Validation Failure

  1. #1
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138

    Question Input Validation Failure

    Hello everyone! I have made a program that calculates a person's GPA and it worked fine http://userpages.umbc.edu/~ofek1/gpa.html.
    Yesterday, though, I added a "Add a class" button and now have 2 problems.

    1. If I say I'm taking ONE class and enter grades it calls GenerateGradeReport() and everything works fine. If I enter anything but a number it alerts the user and doesn't call GenerateGradeReport(), perfect still.

    However, if I say I'm taking MORE THAN ONE class (even before adding a class dynamically) and enter grades it calls GenerateGradeReport() and everything works fine, still. But...if I enter anything but a number it alerts the user BUT STILL CALLS GenerateGradeReport()! As in only the first class' input controls the submission. The rest of the inputs can be invalid but it still proceeds!

    And in the form if I try onsubmit="return Validate(); return false;" (like it should be) instead of just onsubmit="Validate(); return false;" (like it is now), the page gets reloaded on submission!

    2. The is pretty minor but, in my function AddClass() the line breaks aren't getting inserted. I must have incorrect syntax

    Code:
    function AddClass()
    {
                    
    var newCredits = document.createElement('input');    // Create credit input field
    newCredits.setAttribute('type', 'text');
    newCredits.setAttribute('name', 'credits');
    newCredits.setAttribute('maxlength', '1');
    newCredits.setAttribute('onchange', 'return ValidateCredits(this.value)');
    newCredits.setAttribute('form', 'gpaf');
                    
    var newPoints = document.createElement('input');    // Create point input field
    newPoints.setAttribute('type', 'text');
    newPoints.setAttribute('name', 'points');
    newPoints.setAttribute('maxlength', '1');
    newPoints.setAttribute('onchange', 'return ValidatePoints(this.value)');
    newPoints.setAttribute('form', 'gpaf');
                    
    var courseCount = document.getElementsByName('credits').length + 1;    // Constants, for later use
    var marker = document.getElementById('submit');
    var newLine = document.createElement('br');
                    
    var creditText = document.createTextNode('Number of credits for course: ' + courseCount);    // Insert credit input field
    marker.parentNode.insertBefore(creditText, marker);
    marker.parentNode.insertBefore(newLine, marker);
    marker.parentNode.insertBefore(newCredits, marker);
    marker.parentNode.insertBefore(newLine, marker);
                    
    var pointText = document.createTextNode('Grade points earned for course: ' + courseCount);    // Insert point input field
    marker.parentNode.insertBefore(pointText, marker);
    marker.parentNode.insertBefore(newLine, marker);
    marker.parentNode.insertBefore(newPoints, marker);
    marker.parentNode.insertBefore(newLine, marker);
                    
    }

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You have a bigger problem than those you have mentioned. Your code won't work under IE, for several reasons: IE does not consider the events as attributes. IE has a bug: it does not handle too well the name attribute in case of DOM new created elements. IE needs the camel-case in case of creating compounded HTML attributes. Don't give your submit button the name or id = submit. IE will be confounded whether it's about the submit() method or the element called submit.

  3. #3
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    Kor, I'm very confused. I don't understand why IE doesn't even display the initial prompt, I mean that works in FF, Chrome, and Safari. I did what you said, though, and put a div around the submit button instead.

    Note: My IE testing may be inaccurate because I have the IE9 beta, and it won't let me uninstall.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    // see http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/
    var newCredits = document.createElement('input');    // Create credit input field
    newCredits.setAttribute('type', 'text');
    newCredits.setAttribute('name', 'credits');
    newCredits.setAttribute('maxlength', '1');
    newCredits.onchange = function() {return ValidateCredits(this.value);};
    newCredits.form = 'gpaf';
    Depending on what Validate does
    onsubmit="Validate(); return false;" or onsubmit="return Validate();"

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    and:
    Code:
    newCredits.setAttribute('maxLength', '1');

  6. #6
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    Kor, I changed them to camelcase, Fang I cannot use newCredits.onchange = function() {return ValidateCredits(this.value);};
    newCredits.form = 'gpaf'; because an error says "setting a property that has only a getter".

    Guys! The only actual problem with my function AddClass() is the line breaks aren't getting inserted. The issue comes even if I don't call it.

    "However, if I say I'm taking MORE THAN ONE class (even before adding a class dynamically) and enter grades it calls GenerateGradeReport() and everything works fine, still. But...if I enter anything but a number it alerts the user BUT STILL CALLS GenerateGradeReport()! As in only the first class' input controls the submission. The rest of the inputs can be invalid but it still proceeds!"

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Fang I cannot use newCredits.onchange = function() {return ValidateCredits(this.value);};
    newCredits.form = 'gpaf'; because an error says "setting a property that has only a getter".
    Probably a conflict with 'form', use a different name. If the changes are not made the code will not work in IE.

    Post the relevant html; dom changes can silently fail if a method does not work.

  8. #8
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    The form is created dynamically after user's input:

    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" lang="en" xml:lang="en">
    
    
    <head>
        
        <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
        <meta http-equiv="expires" content="Sat, 13 Sept 2008 12:00:00 GMT" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="pragma" content="no-cache" />
    
        <title>GPA Calculator</title>
    
        <script type="text/javascript" src="gpahtml.js"></script>
        
    </head>
    
        
    <body onload="GiveFocus()">
        
        <script type="text/javascript">
        //<![CDATA[
            <!--
            
            var semester = prompt("Enter the semester: ");
            var course = 1;
            
            do
            {
            
                numCourses = prompt("How many courses are you taking in the " + semester + " semester?");
                
            } while (numCourses <= 0 || isNaN(numCourses));
            
            numCourses = parseInt(numCourses);
            
            document.write('<form name="gpaf" id="gpaf" onsubmit="Validate(); return false;"><strong>Semester: </strong><input type="text" name="sem" value=' + semester + ' /><br />');
            
            while (numCourses > 0)
            {
                
                document.write('Number of credits for course ' + course + ': <br /><input type="text" name="credits" maxlength="1" onchange="ValidateCredits(this.value)" /><br /> Grade points earned for course ' + course + ': <br /><input type="text" name="points" maxlength="1" onchange="ValidatePoints(this.value)" /><br /><br />');
                
                numCourses--;
                course++;
                
                if (numCourses == 0)
                {
                
                    document.write('<div id="newclass"><input type="submit" value="Calculate GPA" /></div></form><br />');
                    
                    document.write('<button type="button" onclick="AddClass()">Add a class</button>');
                
                }
                
            }
            
            //-->
        //]]>
        </script>
        
    </body>
    
        
    </html>

  9. #9
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    This is the javascript file, commented:

    Code:
    /***
                ** ValidateCredits - Checks if value entered is a valid number of credits
                ** Input - A number
                ** Output - Boolean value
                *****/
                  
                function ValidateCredits(validNumber)
                {
                  
                    validNumber = parseInt(validNumber);
                  
                    if (validNumber <= 0 || validNumber >= 5 || isNaN(validNumber))
                    {
                    
                        alert("Enter a positive integer from 1 to 4 for the number of credits");
                      
                        return false;
                      
                    }
                    
                    else 
                    {
                    
                        return true;
                      
                    }
                  
                }
                  
                /********
                ** ValidatePoints - Checks if value entered is a valid number of points
                ** Input - A number
                ** Output - Boolean value
                ********/
                  
                function ValidatePoints(validNumber)
                {
                  
                    validNumber = parseInt(validNumber);
                  
                    if (validNumber < 0 || validNumber > 4 || isNaN(validNumber))
                    {
                    
                        alert("Enter a positive integer from 0 to 4 for the number of points earned");
                      
                        return false;
                      
                    }
                    
                    else 
                    {
                    
                        return true;
                      
                    }
                  
                }
                
                /****************************************************************************
                ** TotalPoints - Totals the number of quality points earned
                ** Input - None
                ** Output - Total quality points earned
                ****************************************************************************/
                  
                function TotalPoints()      
                {
                  
                    var numCredits = document.getElementsByName('credits');
                    var numPoints = document.getElementsByName('points');
                    var totalPoints = 0;
                    
                    for (var i = 0; i < numCredits.length; i++) 
                    {
                    
                        totalPoints = totalPoints + (parseInt(numCredits[i].value) * parseInt(numPoints[i].value));
                      
                    }
                    
                    return totalPoints;
                  
                }
                  
                /****************************************************************************
                ** TotalCredits - Totals the number of credits taken
                ** Input - None
                ** Output - Total credits taken
                ****************************************************************************/
                  
                function TotalCredits()       
                {
                  
                    var numCredits = document.getElementsByName('credits');
                    var totalCredits = 0;
                    
                    for (var i = 0; i < numCredits.length; i++) 
                    {
                    
                        totalCredits = totalCredits + parseInt(numCredits[i].value);
                      
                    }
                    
                    return totalCredits;
                  
                }
                  
                /****************************************************************************
                ** GenerateGradeReport - Displays the grade report to the user
                ** Input - Semester
                ** Output - None
                ****************************************************************************/
                  
                function GenerateGradeReport(semester)
                {
                  
                    var finalGPA = CalculateGPA();
                    var totalCredits = TotalCredits();
                    var totalPoints = TotalPoints();
                    
                    parent.showframe.document.getElementById('s').innerHTML = "GPA report for " + semester + "<br /><br />";
                    parent.showframe.document.getElementById('ct').innerHTML = "Credits taken: " + totalCredits + "<br /><br />";
                    parent.showframe.document.getElementById('qp').innerHTML = "Quality points earned: " + totalPoints + "<br /><br />";
                    parent.showframe.document.getElementById('gpa').innerHTML = "GPA for " + semester + ": " + finalGPA.toFixed(3) + "<br /><br />";
                    
                }
                
                
                /****************************************************************************
                ** CalculateGPA - Divides total quality points by number of credits taken
                ** Input - None
                ** Output - Calculated GPA
                ****************************************************************************/
                  
                function CalculateGPA()
                {
                  
                    var finalGPA;
                    
                    finalGPA = TotalPoints() / TotalCredits();
                    finalGPA = parseFloat(finalGPA);
                    
                    return finalGPA;
                  
                }
                
                /****************************************************************************
                ** Validate - Checks if all entries are valid
                ** Input - None
                ** Output - None
                ****************************************************************************/
                  
                function Validate()       
                {
                  
                    var numCredits = document.getElementsByName('credits');
                    var numPoints = document.getElementsByName('points');
                    var semester = document.getElementsByName('sem');
                    
                    for (var i = 0; i < numCredits.length; i++) 
                    {
                    
                        if (!ValidateCredits(numCredits[i].value) || !ValidatePoints(numPoints[i].value)) 
                        {     
                            
                            return false;    /* NOT RETURNING FALSE ON ANY CLASS AFTER THE FIRST!!! */
                            
                        }
                          
                        else 
                        {
                            
                            GenerateGradeReport(semester[0].value);
                            
                        }
    
                    }
                  
                }
                
                /****************************************************************************
                ** AddClass - Adds input fields for a new class
                ** Input - None
                ** Output - None
                ****************************************************************************/
                
                function AddClass()
                {
                    
                    var newCredits = document.createElement('input');    // Create credit input field
                    newCredits.setAttribute('type', 'text');
                    newCredits.setAttribute('name', 'credits');
                    newCredits.setAttribute('maxLength', '1');
                    newCredits.setAttribute('onChange', 'ValidateCredits(this.value)');
                    
                    var newPoints = document.createElement('input');    // Create point input field
                    newPoints.setAttribute('type', 'text');
                    newPoints.setAttribute('name', 'points');
                    newPoints.setAttribute('maxLength', '1');
                    newPoints.setAttribute('onChange', 'ValidatePoints(this.value)');
                    
                    var courseCount = document.getElementsByName('credits').length + 1;    // Constants, for later use
                    var marker = document.getElementById('newclass');
                    var newLine = document.createElement('br');
                    
                    var creditText = document.createTextNode('Number of credits for course: ' + courseCount);    // Insert credit input field
                    marker.parentNode.insertBefore(creditText, marker);
                    marker.parentNode.insertBefore(newLine, marker);
                    marker.parentNode.insertBefore(newCredits, marker);
                    marker.parentNode.insertBefore(newLine, marker);
                    
                    var pointText = document.createTextNode('Grade points earned for course: ' + courseCount);    // Insert point input field
                    marker.parentNode.insertBefore(pointText, marker);
                    marker.parentNode.insertBefore(newLine, marker);
                    marker.parentNode.insertBefore(newPoints, marker);
                    marker.parentNode.insertBefore(newLine, marker);
                    
                }
                
                /****************************************************************************
                ** GiveFocus - Gives focus to the first input field
                ** Input - None
                ** Output - None
                ****************************************************************************/
                  
                function GiveFocus()
                {
                    
                    var cred = document.getElementsByName('credits');
                    
                    if (cred.length == 0)
                    {
                    
                        cred.focus();
                      
                    }
                    
                    else
                    {
                    
                        cred[0].focus();
                      
                    }
                    
                }

  10. #10
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    I have no clue

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    A created element can only be inserted once. The <br> has to be created each time
    Code:
                    var creditText = document.createTextNode('Number of credits for course: ' + courseCount);    // Insert credit input field
                    marker.parentNode.insertBefore(creditText, marker);
                    marker.parentNode.insertBefore(document.createElement('br'), marker);
                    marker.parentNode.insertBefore(newCredits, marker);
                    marker.parentNode.insertBefore(document.createElement('br'), marker);
                    
                    var pointText = document.createTextNode('Grade points earned for course: ' + courseCount);    // Insert point input field
                    marker.parentNode.insertBefore(pointText, marker);
                    marker.parentNode.insertBefore(document.createElement('br'), marker);
                    marker.parentNode.insertBefore(newPoints, marker);
                    marker.parentNode.insertBefore(document.createElement('br'), marker);
    The same layout can be achieved with css. This is the preferred method to use
    Code:
    input  {display:block; margin-bottom:2em;}
    Last edited by Fang; 09-22-2010 at 09:56 AM.

  12. #12
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    Line breaks worked, thanks. Got it! My else statement was applicable to EVERY iteration of the loop, not just at the end. Now it works:
    Code:
    function Validate()
                {
                  
                    var numCredits = document.getElementsByName('credits');
                    var numPoints = document.getElementsByName('points');
                    var semester = document.getElementsByName('sem');
                    var boo = true;
                    
                    for (var i = 0; i < numPoints.length; i++) 
                    {
                    
                        if (!ValidateCredits(numCredits[i].value) || !ValidatePoints(numPoints[i].value)) 
                        {     
                            
                            boo = false;
                            
                            break;
                            
                        }
    
                    }
                    
                    if (boo == false)
                    {
                    
                        return boo;
                    
                    }
                    
                    else 
                    {
                        
                        GenerateGradeReport(semester[0].value);
                        
                    }
                  
                }
    Now, can one of you please tell me what this is doing in IE for you? http://userpages.umbc.edu/~ofek1/gpa.html I don't trust mine because it's the beta.
    For me, it loads the "showframe" containing the directions and then freezes. It doesn't even get to the prompts, the very first step! Why??? Though, when I open it locally, it works fine. What's happenning?
    Last edited by Ofekmeister; 09-22-2010 at 11:19 PM.

  13. #13
    Join Date
    Aug 2010
    Location
    Baltimore, Maryland, United States
    Posts
    138
    I deleted IE cache and now it WORKS! You too? http://userpages.umbc.edu/~ofek1/gpa.html

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Appears to work, although I didn't check the validity of the final calculation.

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