Form validation - Minimum number value - php

Question

Could someone offer me some advice as to form validation that restricts entry of a number below 5. I have got a donation form, simply an amount input field and a submit button to paypal.
What form validation shall I use to restrict submission of the form if the amount value is below 5 (for £5.00).
The form is below:
<form target="paypal" id="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<div class="span6 text-center">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="SECRET-ID">
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="item_name" value="General">
<input type="hidden" name="item_number" value="GEN">
<div class="input-prepend input-append">
<span class="add-on">£</span>
<input class="span12" name="amount" value="5" placeholder="Enter Donation Amount" id="appendedPrependedInput" size="20" type="text">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHostedGuest">
</div>
</div>
<div class="span6 text-center">
<div class="controls">
<a id="buynow" class="btn btn-danger" href="#" rel="nofollow" onclick="document.getElementById('donate').submit(); return false;">
<span style="">Donate via PayPal!</span></a>
<noscript>
<style>#buynow { display: none; } #page_theme #donate input { display: inline; }</style>
<input type="submit" class="btn btn-danger" value="Donate via PayPal!">
</noscript>
</div>
</div>
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

Answer 1

In your case I would use parsley.js
So to use parsley on your form (after you install it), add this data attribute to your form:
data-validate="parsley"
It should look like this:
<form target="paypal" id="donate" action="https://www.paypal.com/cgi-bin/webscr" data-validate="parsley" method="post" >
And for your input add the following data attribute (read the documentation for more validation rules):
data-min="6"
So it should look like:
<input class="span12" name="amount" value="5" placeholder="Enter Donation Amount" data-min="6" id="appendedPrependedInput" size="20" type="text">
And that's it.

Answer 2

There's a lot of them, but since most people are already using JQuery and they want to use client-side validations, I would use Jquery Validation. Remember for back-end, you have to use your own PHP, C# or whatever validation that you need. If you aren't using JQuery, I would use this

Answer 3

If you want a very simple frontend solution, you can use a Javascript function attached to the onblur event for the input element to test the value of the input:
<input type="text" name="amount" onblur="checkValue(this)" />
In the attached function, you pass the element and check the value of that element:
function checkValue(element){
if(element.value < 5){
alert('The minimum donation is 5.00!');
// clear value, display message, etc.
}
}
This function will be triggered whenever the cursor leaves the input field. A simple alert may be all you need. You may also want to add additional check to make sure the element input is actually a number and not a string. It's best to assume the end-user will not know how to use the form.
Please note that this is only a frontend solution and all submitted forms should be validated on the server-side language of choice (e.g. PHP). You should not accept this Javascript validation as a reliable validator when saving data.