How to make paypal button fields 'Required'

Question

i have created a pay now button using paypal button generator.

The button has 2 fields, and then you press pay now.

However, if you leave these fields empty, you can still pay

I want to make these fields "required", if a user didn't fill these fields, he should not be able to pay. How?

The button is not hosted on paypal, but the button protection is ON. I want the button to be encrypted.

EDIT

i tried javascript form validation, didn't work, any help?

here's the script

<form
action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<table>
<tr><td><input type="hidden" name="on0" value="first form">form 1</td></tr><tr><td><input type="text" name="os0" maxlength="200"></td></tr>
<tr><td><input type="hidden" name="on1" value="2nd form">2nd form</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr>
</table>
<input type="hidden" name="encrypted" value=" encryption here ">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

any help making these field required? I'll give you 3 up votes because i have 3 stackoverflow accounts and an accepted answer - that's the least i can do :)

PS

i couldn't make the form validation work, so i tried to hide the submit button unless the forms are filled, so far, that didn't work as well.

UPDATE - @Last Rose Studios

I tried many validation ways, finally i used my friend's contact form validation lol

validation.js

function has_id(id){try{var tmp=document.getElementById(id).value;}catch(e){return false;}
return true;}
function has_name(nm){try{var tmp=cfrm.nm.type;}catch(e){return false;}
return true;}
function $$(id){if(!has_id(id)&&!has_name(id)){alert("Field "+id+" does not exist!\n Form validation configuration error.");return false;}
if(has_id(id)){return document.getElementById(id).value;}else{return;}}
function $val(id){return document.getElementById(id);}
function trim(id){$val(id).value=$val(id).value.replace(/^\s+/,'').replace(/\s+$/,'');}
var required={field:[],add:function(name,type,mess){this.field[this.field.length]=[name,type,mess];},out:function(){return this.field;},clear:function(){this.field=[];}};var validate={check:function(cform){var error_message='Please fix the following errors:\n\n';var mess_part='';var to_focus='';var tmp=true;for(var i=0;i<required.field.length;i++){if(this.checkit(required.field[i][0],required.field[i][1],cform)){}else{error_message=error_message+required.field[i][2]+' must be supplied\n';if(has_id(required.field[i][0])&&to_focus.length===0){to_focus=required.field[i][0];}
tmp=false;}}
if(!tmp){alert(error_message);}
if(to_focus.length>0){document.getElementById(to_focus).focus();}
return tmp;},checkit:function(cvalue,ctype,cform){if(ctype=="NOT_EMPTY"){if(this.trim($$(cvalue)).length<1){return false;}else{return true;}}else if(ctype=="EMAIL"){exp=/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;if($$(cvalue).match(exp)==null){return false;}else{return true;}}},trim:function(s){if(s.length>0){return s.replace(/^\s+/,'').replace(/\s+$/,'');}else{return s;}}};

paypal.html

<script src="validation.js"></script>


    <script>
    required.add('os0','NOT_EMPTY','1st form');

    required.add('os1','NOT_EMPTY','2nd form')

    </script>


<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="return validate.check(this)">
<input type="hidden" name="cmd" value="_s-xclick">
<table>
<tr><td><input type="hidden" name="on0" value="1st form">1st form<span class="required_star"> * </span></td></tr><tr><td><input type="text" name="os0" maxlength="200" id="os0" class="required"></td></tr>
<tr><td><input type="hidden" name="on1" value="2nd form">2nd form<span class="required_star"> * </span></td></tr><tr><td><input type="text" id="os1" name="os1" maxlength="200" class="required"></td></tr>
</table>
<input type="hidden" name="encrypted" value=" encryption here
">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

I have used JavaScript, and then i read your answer, but i'm not gonna change because it works now

i still have 2 small questions

1- is it possible to remove the description box from paypal page see this

2- paypal is not redirecting to the thank you page after the payment is done, i created many button, it's just not redirecting (i don't have a cancel page)

Answer 1

you could use the html5 input attribute 'required', and that would take care of some browsers, for the others you would have to use javascript to validate the form.

I'll use jQuery if you don't mind to give you a quick example.

$('form').submit(function(e){
    flag = false;
    $('[name="os0"], [name="os1"]').css('background','').each(function(){
        el=$(this);
        if(el.val().length == 0){
           flag = true;
           el.css('background','red');
        }
    });
    if(flag){
     return false;
    }
});

this will prevent the form from being submitted unless both fields are filled out. I also added some feedback for the user by turning the background of the input red (optional).

Of course this will only work in modern browsers or older browsers with javascript enabled, there will still be a small percentage where it will pass through. In this case Robert's suggestion that you post to an in between page on your server might be a good idea.

Answer 2

Without modifying the button code, you'd need a client-side solution (like you mentioned), since the POST will go directly to PayPal (https://www.paypal.com/cgi-bin/webscr).
Alternatively, you could submit the POST to an inbetween page on your server, and forward from PayPal there on, in order to include a server-side check as well (only if the fields are absolutely required, in case JavaScript is disabled, for example).