javascript - php 表单与 jquery 验证问题

Question

** 使用附加代码进行了更新 **

我正在为某人重新设计一个网站，并重用以前开发人员的一些 php 代码。表单提交并在流程页面上的服务器端进行验证。从用户体验的 Angular 来看，这显然是不好的。我正在尝试合并 jquery 验证。我更像是一名设计师，对 php 和 jquery 的了解有限。

这是一个非常简单的表单，最后有 2 个提交选项。 1 个用于支票付款的按钮，1 个用于 Paypal 付款的按钮。

用于这些按钮的代码完全绕过了我的 jquery 表单验证。如果我放置一个简单的提交按钮，jquery 验证就会启动。

这是正在使用的 2 个按钮的代码。

    <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> 

这些按钮只是将 paypal 或 null 传递到表单提交流程页面，然后重定向。有没有办法让我通过 jquery 验证，然后使用这些值提交？

Answer 1

您只需为 FirstName 字段添加一个规则对象，并从输入元素中删除属性。

以下方法也不起作用:

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

但是，如果它确实有效，则存在一种极端情况，即用户单击 paypal 按钮，但表单未验证，然后用户修复验证错误并使用 提交表单>检查按钮。在这种情况下，表单将通过 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>