www.webdeveloper.com
Results 1 to 2 of 2

Thread: Validate data in a function

  1. #1
    Join Date
    May 2013
    Posts
    8

    Validate data in a function

    I have a form with 3 fields. When the user hits the submit button, it calls a function which calculates the 3 fields together. I also have functions to validate the data in each field. Currently the validation checks that the field is filled in and that the numbers aren't too high or too low. I would also like it to check that the values in each field are actual numbers. I tried using isNaN() but that doesn't seem to be working.

    Also, when the form is submitted, I want it to run each of the validation functions and then calculate the results ONLY if there were no errors. If tried setting it up as if/else- with each of the validation returning false if there's an error and true if it's all good, then the calculation function checking if each function is true before performing the math but that doesn't seem to be working either. I'd appreciate a little insight here!

    Here are a link to the files
    http://tiger.towson.edu/~tbaldw2/loa.../LoanCalc.html
    http://tiger.towson.edu/~tbaldw2/loa...or/LoanCalc.js
    (working files)

    http://tiger.towson.edu/~tbaldw2/loa...LoanCalc1.html
    http://tiger.towson.edu/~tbaldw2/loa...r/LoanCalc1.js (with the non-working changes)

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    Code:
    <!DOCTYPE html>
    <!-- Built in CoffeeCup HTML Editor -->
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>Loan Payment calculator</title>
       <script type="text/javascript">
    function doc(id){return document.getElementById(id);}
    
    function numsonly(obj){
    var val=obj.value,mask=/[^\d]/ig;
    if(val.length==0){return;}
    obj.value=val.replace(mask,'');
    doc(obj.id+'_err').innerHTML='';
    }
    
    function checkFields(frm){
    var fields=frm.elements,valid=true;
    for(var i in fields){
    if(fields[i].type!=='text'){continue;}
    else{
    var fid=fields[i].id,val=(doc(fid).value.length>0)?new Number(doc(fid).value):0;
    if(val==0){valid=false;doc(fid).value='';doc(fid).focus();break;}
    if(fid==='amt'){if(val<10 || val>1000000){doc(fid+'_err').innerHTML='Please enter a number between 10 and 1000000';valid=false;doc(fid).value='';doc(fid).focus();break;}}
    if(fid==='apr'){if(val<0.1 || val>20){doc(fid+'_err').innerHTML='Please enter a number between .1 and 20';valid=false;doc(fid).value='';doc(fid).focus();break;}}
    if(fid==='mtp'){if(val<1 || val>600){doc(fid+'_err').innerHTML='Please enter a number between 1 and 600.';valid=false;doc(fid).value='';doc(fid).focus();break;}}
    }
    }
    if(valid){docalc();}
    }
    
    function init(){
    doc('amt').onchange=doc('amt').onblur=doc('amt').onkeyup=doc('apr').onchange=doc('apr').onblur=doc('apr').onkeyup=doc('mtp').onchange=doc('mtp').onblur=doc('mtp').onkeyup=function(){numsonly(this);}
    }
    
    function docalc(){
        var amount = doc('amt').value;   //Sets the value from the "amount of loan" field to the variable amount
        var apr = doc('apr').value; 		   //Sets the value of the apr field to the apr variable
        var months = doc('mtp').value;   //Sets the months to pay field value to the months variable
    
    	var monthly_int = apr/1200.0; /* interest divided by 12 months * 100 percent */
    	var pvifa=(1.0/ monthly_int)-(1.0/( monthly_int *Math.pow(1.0+ monthly_int, months)));
    	payment = amount/pvifa;
    	
    	payment = Math.round(payment*100)/100 //Rounds the "payment" number to 2 decimal places 
    	doc("results").innerHTML=payment;
    	//return false;
    }
    
    window.onload=init;
       </script>
       <link rel="stylesheet" href="LoanCalc.css"/>
    </head>
    <body>
    
    <h1>Loan Calculator</h1>
    <form name="loandata" action="about.blank" method="get"> <!-- Start of the form which will take input for the loan calculator -->
    
    <div id="description"
    <p>This form will calculate how much monthly payments need to be in order to pay off a loan. Fill in the fields below, numbers and decimal points only, and click Calc Payment to calculate the monthly payment. Enter new numbers and click Calc Payment again to get an updated monthly payment. </p>
       <ul>
       <li>For Amount enter a number between 100 and 1000000</li>
       <li>For APR enter a number between 0.1 and 20</li>
       <li>For Months enter a number between 1 and 600.</li>
       </ul>
    </div> <!-- creating a div to make extra space below the description and before the table--> 
     
      <table> <!-- Table to keep the titles and form fields layed out nicely -->
        <tr>
    	  <th colspan="4">Enter Loan Information:</th>
    	</tr>
        <tr>
          <td class="label"><label for="amt">Loan Amount:</label></td>
    	  <td>$</td>
          <td><input type="text" name="amount" id="amt"></td> <!-- onBlur means when the field is deselected, will run the validate function to ensure there are no invalid characters in the field -->
    	  <td class="error" id="amt_err"><!-- This table cell will contain an error message if invalid info is entered in the field. It has a class of error so all the cells with this purpose can get the same formatting, and a unique id so the function knows which table cell to put the text in--></td> 
        </tr>
        <tr>
          <td class="label"><label for="apr">Annual Percentage Rate (APR):</label></td>
    	  <td></td>
          <td><input type="text" name="apr" id="apr">% </td>
    	  <td class="error" id="apr_err"></td>
        </tr>
        <tr>
          <td class="label"><label for="mtp">Months to pay:</label></td>
    	  <td></td>
          <td><input type="text" name="months" id="mtp"></td>
    	  <td class="error" id="mtp_err"></td>
        </tr>
        <tr>
    	  <td class="button"><input type="button" value="Calc Payment" onclick="checkFields(this.form)"></td> <!-- Calls function OnSubmit which takes the numbers from each field and calculates them to give a total -->
    	  <td></td>
    	  <td class="button"><input type="reset" value="Reset"></td> <!-- Reset button to clear the form fields -->
    	  <td></td>
    	</tr>
      </table>
    </form>
     
      <h2>Payment Information:</h2>
      <p>Your monthly payment will be: $<span id="results"> <small id="note"> Fill in the fields above and click Calc Payment to have this figure calculated.</small></span><p> 
      <!-- The OnSubmit function will overwrite the text in the span above with the results of the calculation -->
      
    <div id="footer">
     <small> <span class="info">Student ID: 0129508</span> <span class="info">&copy;2013 Tenley Baldwin</span></small>
    </div>
    </body>
    </html>

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