带有jquery验证问题的php表单 - php Form with jquery validation issue

** 使用其他代码进行了更新 **

我正在为某人重新设计一个网站，并重用以前开发人员的一些 php 代码。表单在流程页面上提交并执行验证服务器端。从用户体验的角度来看，这显然是不好的。我正在尝试合并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 验证，然后使用这些值提交？

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

以下方法也不起作用：

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

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

可能发生的事情是内联javascript劫持了代码，它永远不会进入jQuery验证。所以删除它。此外，最好将 ID 添加到a标记提交按钮，以便轻松捕获点击事件。您还需要禁止 a 标记的默认操作，因此请使用 event.preventDefault（请注意，您必须将事件参数传递到 .click 函数中）

（1）删除内联 JavaScript。

（2）为锚标签分配 ID。

（3）然后，使用 jQuery 测试点击事件。

工作 js小提琴

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

j查询：

$('#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();
        }
    }
});

如果你有多个字段要检查，这里有另一个jsFiddle演示，展示了如何处理它：

http://jsfiddle.net/tyvk15cg/