CODEWITHSUNDEEP
jqueryforms
Gerico
Gerico

Reputation: 5169

Validate 3 form fields with jQuery

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.

Upvotes: 0

Views: 600

Answers (2)

VIDesignz
VIDesignz

Reputation: 4783

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');
    }
});

Upvotes: 1

Christian
Christian

Reputation: 19750

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);
}

Upvotes: 0

Related Questions