Validate 3 form fields with jQuery

Question

I've got a form i want to apply validation to:

<form id="calculator">

            <div class="f-field">
                <label for="sale-price">Sale Price</label>
                <input id="sale-price" type="text" value=""/>
            </div>

            <div class="f-field">
                <label for="agent-commission">Highstreet agent commission</label>
                <input id="agent-commission" type="text" value=""/>
            </div>

            <div class="f-field">
                <label for="sale-time">Estimated sale time</label>
                <input id="sale-time" type="text" value=""/>
            </div>

            <div class="f-field">
                <input type="button" value="Calculate" id="calc-button"/>  
            </div>

        </form>

My jQuery so far:

 $(document).ready(function(){

        $('#calc-button').click(function(){

            var answer = 

            parseInt($('#sale-price').val()) / 
            parseInt($('#agent-commission').val()) + 
            parseInt($('#sale-time').val());

            var validate= false;
            $("#calculator input[type='text']").each(function(){
                if($(this).val() != '' || $(this).attr('checked'))
                    validate = true;
            });
            if(!validate){
                alert('Please select at least one filter');
                return false;
            }
            else { 
                $('#calc-val').html('£' + answer);
            }

        });
    });

Is there an easy way to setup validation on the 3 fields, which will all only ever have numeric values. I want to validate presence of a number, so anything that's not a number or lack of anything at all, will throw up a message.

I'd really want to avoid a full on jQuery plugin as i am sure there is a way for such a small form, however i am looking for advice on this.

edit Added in my jQuery, trying to work on the acceptance rate as commenter mentioned below. Sorry for not doing it sooner.

Will do, ive uploaded my jQuery thus far. – Gerico Dec 07 '12 at 09:11 — Gerico, Dec 07 '12 at 09:11

VIDesignz · Accepted Answer · 2012-12-06T17:53:57.970

1

Here is a working FIDDLE

This will remove anything that is not a number while the user is typing...

$("#sale-price, #agent-commission, #sale-time").on("keyup keypress keydown blur input change", function() {

    // Remove All Non Numbers
    $(this).val($(this).val().replace(/[^0-9]/gi, ""));

});

Then check to make sure the values are not empty on sumbit

$('#calculator').on('submit', function(e) {
    e.preventDefault();

    if ( ($('#sale-price').val() && $('#agent-commission').val() && $('#sale-time').val() ) != '' ) {
        $(this).submit();
    }
    else {
        alert('Please Fill In All Fields');
    }
});

edited Dec 06 '12 at 17:53

answered Dec 06 '12 at 17:40

VIDesignz

4,703
3
25
37

Thank you, this works perfectly. I appreciate the fiddle too! – Gerico Dec 07 '12 at 09:17
One question, im printing a value out if you take a look at my jQuery at the top. I'm getting NaN when no values are input, can i disable this? – Gerico Dec 07 '12 at 09:29
@Mat-visual Sure! What do you want it to be instead? – VIDesignz Dec 07 '12 at 13:24
Yeh sure, ill link it in a moment – Gerico Dec 07 '12 at 13:28

score 0 · Answer 2 · answered Dec 06 '12 at 17:36

Sure, just bind a handler to the submit event, and prevent the form from submitting unless the values match what you want.

Something like this:

$('#calculator').on('submit', function(e) {
    e.preventDefault();

    if ( isNumber( $('#sale-price').val() ) && isNumber( $('#agent-commission').val() ) && isNumber( $('#sale-time').val() ) ) {
        $(this).submit();
    }
    else {
        // errors in form
    }
});

// from http://stackoverflow.com/a/1830844/551093
function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

Validate 3 form fields with jQuery

2 Answers2