Trying to create validation for an input field, which will put a message alongside the input field. As you can see, the user cannot enter anything below 500 or anything above 800

<input type="text" name="amount" id="amount" maxlength="6" autoplete="off"/>
<span class="paymentalert"></span>

Please excuse my javascript as I'm still learning.

$(function(){
    var min = 500.00;
    var max = 800.00;
    if ("#amount" < 500.00){
         return ("Your payment must be between £500 and £800");
        else if ("#amount" > 800.00)
         return ("Your payment must be between £500 and £800");
    else return false;
    };

Trying to use examples from Stackoverflow but getting nowhere.

Trying to create validation for an input field, which will put a message alongside the input field. As you can see, the user cannot enter anything below 500 or anything above 800

<input type="text" name="amount" id="amount" maxlength="6" autoplete="off"/>
<span class="paymentalert"></span>

Please excuse my javascript as I'm still learning.

$(function(){
    var min = 500.00;
    var max = 800.00;
    if ("#amount" < 500.00){
         return ("Your payment must be between £500 and £800");
        else if ("#amount" > 800.00)
         return ("Your payment must be between £500 and £800");
    else return false;
    };

Trying to use examples from Stackoverflow but getting nowhere.

• javascript
• jquery
• validation

• 1 I'd remend you learn js from ground up without jquery for now. You know, one should know how to add before using a calculator. Her's an awesome js tutorial at mdn - developer.mozilla/en-US/docs/JavaScript/Guide – svineet Commented Feb 12, 2013 at 16:35

3 Answers 3

To start, "#amount" is just a string. What you want is the value of the element with an id of amount; "#amount" is the correct selector for that element, but you need to pass it to the jQuery function to actually select it. So:

var amountInput = $("#amount");

That gives you a jQuery object that contains your text input element. Now, you want the value of that input, so you need to call the .val() function on that jQuery object. However, remember that values for text inputs are stored as strings, so you'll need to convert it to a number before you use it as one.

var amount = parseFloat(amountInput.val(), 10);

The entire thing:

var min = 500.00;
var max = 800.00;
var amountInput = $("#amount");
var amount = parseFloat(amountInput.val(), 10);
if (amount < 500.00){
     return ("Your payment must be between £500 and £800");
else if (amount > 800.00)
     return ("Your payment must be between £500 and £800");
else return false;

Though you're currently calling your code inside a $(document).ready(function() {...}) call - $(function() {...}) is a shorthand - so it will execute immediately after the page "loads" (actually once the DOM has finished being constructed, but before images and such have finished loading). That's probably not going to be much use, since your user won't have time to enter a value.

Instead, bind it to an event, perhaps clicking a button with an id of validate:

$('#validate').on('click', function(e) {
    // code above here
});

I'd also suggest taking a read through some introductory jQuery tutorials.

See DEMO.

$("#amount").bind("keyup keydown", function() {
    var amount = parseFloat($(this).val());
    if (amount) {
        if (amount < 500 || amount > 800) {
            $("span.paymentalert").html("Your payment must be between £500 and £800");
        } else {
            $("span.paymentalert").html("");
        }
    } else {
        $("span.paymentalert").html("Your payment must be a number");
    }
});

You're currently running this function once as soon as the dom is loaded, and not again. You'll need to run it when the input is updated. You probably want to look into the blur element for this: http://api.jquery./blur/

You also are paring the string "#amount" to a number. You'll need to pare the value of the field like this:

if (parseFloat($("#amount").val(),10) < 500.00){