php Form with jquery validation issue

Question

** Updated with additional code **

I am redesigning a site for someone and reusing some of the php code from the previous developer. The form submits and does validation server-side on the process page. This is obviously bad from a user experience perspective. I am trying to incorporate jquery validation. I am more of a designer and have limited knowledge on php and moderate jquery.

Its a pretty straight forward form that has 2 submit options at the end. 1 button for paying with a check, 1 for paypal.

The code being used for these buttons is completely bypassing my jquery form validation. If I put a simple submit button the jquery validation kicks.

This is the code for the 2 buttons being used.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.js"></script>
<script>
$(document).ready(function(){
    $('form').validate();
});     
</script>

<form id="lx" class="form-horizontal" action="reg_process.php" method="post" name="regform">



    <div class="row mbs">                
             <label class="control-label col-sm-4" for="firstname"><span class="font-standout">*</span> First Name: </label>
             <div class="col-sm-8">
                <input type="text" id="firstname" name="FirstName" class="form-control input-lg mrs mls" min="2" required  />
             </div>
        </div>



    <a href="javascript:void(0)" onclick="document.regform.Submit.value = 'PayPal'; document.regform.submit()" class="btn btn-primary">
        <i class="fa fa-paypal"></i><br/>
        Pay with Paypal Online
    </a>

    <a href="javascript:void(0)" onclick="document.regform.submit()" class="btn btn-primary" >
        <i class="fa fa-check"></i><br/>
        Pay By Check
    </a> 

The buttons are simply passing either paypal or null into the form submit process page and then redirecting after that. Is there a way I can make this pass jquery validation and then submit with those values?

Answer 1

You just need to add a rules object for the FirstName field and remove the attributes from the input element.

Also the following doesn't work:

// Uncaught TypeError: Cannot set property 'value' of undefined
document.regform.Submit.value = 'PayPal';

However if it did work there is a corner case, where the user clicks the paypal button but the form does not validate, the user then fixes the validation errors and submits the form with the check button. In this event the form will be submitted with Submit=PayPal .

 jQuery(function($) { var form = $('#lx'), submit = $('input[name=Submit]', form); form.validate({ rules: { FirstName: { required: true, minlength: 2 } } }); // lets keep JavaScript out of the DOM $('#bypaypal, #bycheck').on('click', function(event) { var paymentType = event.target.id === 'bypaypal' ? 'PayPal' : ''; submit.val(paymentType); form.submit(); }); // this is just for demo purposes, you don't need it form.on('submit', function() { if (form.valid()) { alert('Form is valid: Submit="' + submit.val() + '"'); } }); }); 

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.js"></script> <form id="lx" class="form-horizontal" action="reg_process.php" method="post" name="regform"> <div class="row mbs"> <label class="control-label col-sm-4" for="firstname"> <span class="font-standout">*</span> First Name: </label> <div class="col-sm-8"> <input type="text" name="FirstName" class="form-control input-lg mrs mls" /> <input type="hidden" name="Submit" value="" /> </div> </div> <a href="javascript:void(0);" id="bypaypal" class="btn btn-primary"> <i class="fa fa-paypal"></i> <br/>Pay with Paypal Online </a> <a href="javascript:void(0);" id="bycheck" class="btn btn-primary"> <i class="fa fa-check"></i> <br/>Pay By Check </a> </form> 

Answer 2

Probably what's going on is the inline-javascript is hi-jacking the code and it never makes it to the jQuery validation. So remove it. Also, it's a good idea to add IDs to the a tag submit buttons to easily capture the click event. You also need to suppress the default action of an a tag, so use event.preventDefault (note that you must pass the event param into the .click function)

(1) Remove inline javascript.

(2) Assign IDs to your anchor tags.

(3) Then, use jQuery to test for click event.

working jsFiddle

HTML:

<form id="lx" class="form-horizontal" action="reg_process.php" method="post" name="regform">
    <div class="row mbs">
        <label class="control-label col-sm-4" for="firstname"><span class="font-standout">*</span> First Name:</label>
        <div class="col-sm-8">
            <input type="text" id="firstname" name="FirstName" class="form-control input-lg mrs mls" min="2" required />
        </div>
    </div> 
    <a id="paypal_submit" href="javascript:void(0)" class="btn btn-primary">
        <i class="fa fa-paypal"></i><br/>
        Pay with Paypal Online
    </a>
    <a id="normal_submit" href="javascript:void(0)" class="btn btn-primary">
        <i class="fa fa-check"></i><br/>
        Pay By Check
    </a> 
</form>

jQuery:

$('#paypal_submit, #normal_submit').click(function(e){
    e.preventDefault; //stop a tag default action
    var submit_type = this.id.split('_')[0]; //paypal or normal
    var fn = $('#firstname').val();
    if (fn=='' || fn.length < 4){
        alert('Invalid first name');
        $('#firstname').css({'background':'yellow','border':'1px solid orange'}).focus();
        return false;
    }else{
        if (submit_type == 'paypal'){
            $('#lx').val('PayPal').submit();
        }else{
            $('#lx').submit();
        }
    }
});

---

If you have multiple fields to check, here is another jsFiddle Demo that shows how to handle that:

http://jsfiddle.net/tyvk15cg/