Form validation - Minimum number value

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>

Seems like a simple thing. What have you tried or found in the web? — madth3
– madth3, Commented Jun 27, 2013 at 18:30
I don't really want a 1p donation that will cost the charity in paypal fees... @relentless — Luke
– Luke, Commented Jun 27, 2013 at 18:33

Timber · Accepted Answer · 2013-06-27 19:08:04Z

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.

answered Jun 27, 2013 at 19:08

Timber

8779 silver badges26 bronze badges

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

1 Comment

Luke Over a year ago

That is perfect! I don't code forms much so I am not too experienced with the best validation services! This is being bookmarked right now.. thanks a lot!

Rafi W. · Accepted Answer · 2013-06-27 18:31:02Z

0

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

answered Jun 27, 2013 at 18:31

Rafi W.

1842 silver badges11 bronze badges

Comments

Siphon · Accepted Answer · 2013-06-27 19:25:26Z

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.

Collectives™ on Stack Overflow

Form validation - Minimum number value

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related