2

this is really weird.

The morgage calculator I was working on (I had another question previous to this one) is now working the way I wanted it to EXCEPT.... that it doesn't validate values greater than 9999.

If you go to the link below, you'll be able to see what I mean.

http://jsfiddle.net/fLT8C/1/

The code is supposed to make sure that the values entered in Down payment and purchase price are actually numbers. If they're not, a message comes up, if they are, then the code validates that Purchase price is not greater than the Down Payment amount.

The code works... but only if the values you enter are 9999 or lower. If you do, for example... 1350000 and 5000 down payment, the code doesn't submit. If you do 9999 and 5000, no problem.

I'm really confused. Any ideas?

Here's my HTML. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Assignment 8.1</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/js.js" charset="utf-8"></script>
</head>

<body>
        <h1>Mortgage Calculator</h1>

    <form action="calc.php" method="post" id="mortgage-form">
        <p class="errorMessage" id="shouldBeNumber">*This value can only contain numbers</p>
        <p id="pPrice"><span class="errorMessage" id="PPmustBeNumber">*</span>Purchase Price:
            <input type="text" name="purchase-price" id="purchase-price" value="0" />   <span class="errorMessage" id="purchasePriceError">Please enter a number value!</span>

        </p>
        <p id="dPayment"><span class="errorMessage" id="DPmustBeNumber">*</span>Down Payment:
            <input type="text" name="down-payment" id="down-payment" value="0" />   <span class="errorMessage" id="downPaymentError">Down payment value must be less than Purchase Price!</span>

        </p>
        <p id="term">Select Term:
            <select name="loan-term" id="loan-term">
                <option value="noValueSelected">-- Select a Term --</option>
                <option value="15yrs">15 Years</option>
                <option value="20yrs">20 Years</option>
                <option value="30yrs">30 Years</option>
            </select><span class="errorMessage" id="termRequired"> * Term is required.</span>

        </p>
        <div id="rate"></div>
        <p>
            <input type="submit" name="submit" id="submit" value="Calculate!" />
        </p>
    </form>
    <footer>
        <p>&copy; Copyright by Ricardo</p>
    </footer>
</body>

</html>

See my jquery in my jsfiddle please.

4

3 回答 3

5

i suppose the problem is your function:

function containsNumber(val) {
    return /^(\d|,)+$/.test(val)
}

use this:

function containsNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}
于 2013-05-09T21:37:13.310 回答
0

You seem to use a custom regex pattern to detect if it is a number. Why not do it with native javascript methods?

isNaN(val)

checks if val does not contain a valid number. So in your case, use this.

function containsNumber(val) {
        return !isNaN(val);
}

http://jsfiddle.net/tfHq2/

于 2013-05-09T21:35:47.553 回答
0

I changed the three values to integers - http://jsfiddle.net/fLT8C/3/

    var purchasePrice = parseInt($('#purchase-price').val());
    var downPayment = parseInt($('#down-payment').val());
    var loanTerm = parseInt($('#loan-term').val());
于 2013-05-09T21:40:04.610 回答