homepage Welcome to WebmasterWorld Guest from 54.226.252.142
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Limit Number Values inside HTML Form input field
How to limit number values inside form input field
borisz




msg:4642057
 11:04 am on Feb 3, 2014 (gmt 0)

Hi,

I have following form:

<form action="action/balancePayPal.php" method="post">
<input class="span2" value="20" name="accBalance" />
<button class="btn btn-large btn-payment" name="balanceSubmit" value="Submit">Submit &raquo;</button></p>
</form>


and I want to block users to submit the form if the value/amount they enter is lower then 20 and larger then 10000, and also don't allow them to enter anything else beside numbers inside that input field.

How do I achieve that with JQuery.

Thanks for help!

 

Fotiman




msg:4642113
 3:14 pm on Feb 3, 2014 (gmt 0)

Are decimal values allowed? 20.1, etc.?

Readie




msg:4642399
 5:46 pm on Feb 4, 2014 (gmt 0)

Note: If your answer to Fotiman's question is "no", use this regular expression instead of the one below:
/^\d+$/

First, attach an id or a class to your form. In this example I'm assuming an id of number_form
$('#number_form').on('submit', function(event) {
var accBalance = $(this).find('[name="accBalance"]:first').val();

if(!accBalance.match(/^\d+(\.\d+)?$/)) {
alert('Account balance must be numeric');
event.preventDefault();
return false;
}

accBalance = parseFloat(accBalance);
if(accBalance < 20 || accBalance > 10000) {
alert('Account balance must be between 20 and 10,000');
event.preventDefault();
return false;
}

return true;
});

NB: Do not rely on this validation for your server side code. All javascript validation can be very easily circumvented.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved