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?

Don't remove the server side validation, just add validation to the client. — robbmj
– robbmj, Commented Mar 14, 2015 at 15:38
I can keep the server-side there. But still need to know how to force jquery validation and still pass the 'Paypal' through if jquery validation passes — Jamie Collingwood
– Jamie Collingwood, Commented Mar 14, 2015 at 15:40

robbmj · Accepted Answer · 2015-03-23 16:06:21Z

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>

cssyphus · Accepted Answer · 2015-03-14 17:01:30Z

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/

Putting the $('#lx').submit() in both sides of the if/else doesn't make logical sense. If it fires under both conditions, then it doesn't need to be in a conditional.
@Sparky You are right, but the value has to be set before hitting submit - that' s the point. It's inelegant code, but some days you're the coder, and some days you're the beanie... This is not one of my better days... but hopefully I've given the OP some ideas, further to the excellent suggestions of robbmj, on how to resolve his question.

Collectives™ on Stack Overflow

php Form with jquery validation issue

2 Answers 2

Comments

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Related