php表单与jquery验证问题

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>

</div>