www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Trouble with input valdation

  1. #1
    Join Date
    Apr 2013
    Posts
    6

    resolved [RESOLVED] Trouble with input valdation

    I am having trouble with one part of this assignment. I have everything else working but I can not get the checkDownfunction to properly check for an error. When I run the program, it always sends the alert. I assume it has something to do with this statement :

    || formData.downPayment.value > formData.stickerPrice.value)

    especially the formData.stickerPrice.value portion. I thought that would work but it isn't.
    I know this may not be the easiest way to do this, but the instructor wants it done this way. Here is the whole code to give you a better idea.
    Code:
    <script type= "text/javascript">
    
    <!-- 
      function calcCost(formData)
      {
       
      //alert ("calcCost function reached.");
      //Input section
      var PRICE = parseFloat(formData.stickerPrice.value);
      var DOWN = parseFloat(formData.downPayment.value);
      var RATE = parseFloat(formData.interestRate.value);
      var TERM = parseInt(formData.termMonths.value,10);
      
      //calculations
      //alert (" calculating ");
      var PRIN = PRICE - DOWN; 
      var INT = PRIN * (RATE/100) * TERM / 12;
      var TCOST = PRICE + INT;
      var MPAY = (PRIN + INT) / TERM;
    
      //output
      //alert("Output total calcuations reached");
      formData.totalCost.value = "" + TCOST;
      formData.monthlyPayment.value = "" + MPAY;
     
      }
    
       function checkPrice(formData)
      {
       
      if (formData.stickerPrice.value < 0 || formData.stickerPrice.value > 100000 )
         {
         alert("Sticker price must be greater than 0 or less than $100,000");
          setTimeout (function() {formData.stickerPrice.focus();},3);
           
         }
      }
    
      function checkDown(formData)
      {
      if (formData.downPayment.value < 0 || formData.downPayment.value > formData.stickerPrice.value)
         {
         alert("Down Payment must be at least 0 but not greater than the sticker price."); 
         setTimeout (function() {formData.downPayment.focus();},3);
         }
      }
    
      function checkRate(formData)
      {
      if (formData.interestRate.value < 0 || formData.interestRate.value > 25)
         {
         alert("Interest rate must be between 0% and 25%.");
         setTimeout (function() {formData.interestRate.focus();},3);
         }
      }
    
    
      function checkTerm(formData)
      {
      if (formData.termMonths.value < 0 || formData.termMonths.value > 72)
         {
         alert("The term of the loan should be between 0 and 72 months.");
         setTimout (function() {formData.termMonths.focus();},3);
    
         }
      }
       
    -->
     </script> 
    </head>
    
    <body>
    <h1> Car Cost Calculator </h1>
    
    
    <hr />
    
    
    <p> This program will determine and display the overall cost of purchasing a car and the monthly payment required. 
    Please enter the following data without commas, dollarsigns or percent signs by filling in the fourinput text 
    boxes below. Then click on the [Calcuate] button.  The answer will appear in the two textboes at the bottom of the 
    window.  To calculate with different data, click the [Reset] button and start over.</p>
    
    <form action =''>
    
    <h2> INPUT AREA:</h2>
     
    <p>Sticker Price on the Car(in dollars):
    <input type="text" name="stickerPrice" onblur = "checkPrice(this.form)" /></p>
     
    <p>Down Payment(in dollars):
    <input type="text" name= "downPayment" onblur = "checkDown(this.form)"/></p> 
    
    <p>Annual InterestRate of the Loan:%
    <input type="text" name ="interestRate" onblur = "checkRate(this.form)"/></p> 
    
    <p>Term of the Loan (in Months):
    <input type="text" name ="termMonths" onblur = "checkTerm(this.form)"/></p>  
    
    <p>
    <input type="button" value="Calculate" name="calcButton" onclick="calcCost (this.form)" /> 
    
    <input type="reset" name="resetButton" value="Reset" /></p> 
     
    
    
    
    <h2>OUTPUT AREA: </h2>
    <p>The total cost for that car including interest would be $
    <input type ="text" name="totalCost" /></p>
    
    <p>The monthly payment would be $
    <input type ="text" name = "monthlyPayment" /></p>
    
    </form>
    
    </body>
    </html>
    Any help would be appreciated.

  2. #2
    Join Date
    Apr 2013
    Posts
    6

    figured it out.

    My instructor helped me with the solution. Basically I was trying to compare two strings when I needed to parse the two statements into numbers.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    if it was comparing types problem, then why it worked good with formData.downPayment.value < 0 or formData.stickerPrice.value > 100000? it is interesting what does your instructor think about these cases?

  4. #4
    Join Date
    Apr 2013
    Posts
    6
    He did not speak of those. Here is the response he gave me through email. This is an online class.

    The part that reads:


    formData.downPayment.value > formData.stickerPrice.value

    is comparing strings rather than numbers. So a value like "1000" would be interpreted as < (before) "20". (Think of sorting text in a phone book.) Try parsing the two values into numeric variables first and then comparing them.

    I then adjusted my code to look like this

    Code:
     function checkDown(formData)
      { 
      if (formData.downPayment.value < 0 || parseFloat(formData.downPayment.value) > parseFloat(formData.stickerPrice.value))
         {
         alert("Down Payment must be at least 0 but not greater than the sticker price."); 
         setTimeout (function() {formData.downPayment.focus();},3);
    It works. I don't understand fully why but I have a whole bunch to learn so I keep these projects to practice and hopefully understand it better one day.

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    if you change, for example, the first field checking function like this you can see the types:

    Code:
    function checkPrice(formData){
    alert('typeof formData.stickerPrice.value is "'+typeof formData.stickerPrice.value+'" and typeof 100000 is "'+ typeof 100000+'"');
    if(formData.stickerPrice.value < 0 || formData.stickerPrice.value > 100000){
    alert("Sticker price must be greater than 0 or less than $100,000");
    setTimeout(function(){formData.stickerPrice.focus();},3);
    }
    }
    and this function is still ok and works good, doesn't it? ))

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