2

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" autocomplete="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.

Improve this question
1
  • 1
    I'd recommend 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.org/en-US/docs/JavaScript/Guide Commented Feb 12, 2013 at 16:35

3 Answers 3

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

@Anthony Grist - The validation for max/min is done after the paresFloat(). So in case if the value is say "aa5.0"; then this will be NaN OR if it is say ""5.123aa"; then this will be "5.123". In such cases, the validation (for min/max) is done on a value that exactly not what the user entered. For example if user enters a value of "501.aa"; then the validation will PASS
@Arun Right, because JavaScript will happily convert 501.aa to a number when passed to parseFloat, as explained in the documentation (which I'd hope people would read after encountering a new function). Perhaps I should have made mention of that particular behaviour in my answer at the time, but doesn't seem like it's worth bumping the entire question to do so now. If you absolutely need those cases to be ignored, you'd need to do some additional processing beforehand to check for invalid characters.
@AnthonyGrist - Thanks for reply :-). I have used your answer to one of my issue and I did check (using regex) for a perfect decimal number before going to the check for min/max. And then I just thought it is worth mentioning it here....
1

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");
    }
});
Improve this answer

3 Comments

That's good @Antony, although when a user types in the correct number, the message is still there. How can I get rid of this? EDIT: My bad, it works fine. Cheers.
@Janatan The message is not there if the user types the correct number and clicks out of the input box. I have updated the answer to make it respond immediately to any inputs.
@Janatan Please don't upvote this answer. There is nothing interesting in it. Read Anthony Grist's answer and learn more about jQuery.
1

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.com/blur/

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

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.