带有jquery验证问题的php表单

Question

** 使用附加代码更新**

我正在为某人重新设计一个网站并重用以前开发人员的一些 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 验证，然后用这些值提交？

Answer 1

您只需为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>

Answer 2

可能正在发生的事情是 inline-javascript 劫持了代码，但它从未进入 jQuery 验证。所以删除它。此外，最好将 ID 添加到 a 标记提交按钮以轻松捕获点击事件。你还需要抑制a标签的默认动作，所以使用event.preventDefault（注意你必须将事件参数传递给.click函数）

(1) 删除内联 javascript。

(2) 为您的锚标记分配 ID。

(3)然后，使用jQuery来测试点击事件。

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

---

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

http://jsfiddle.net/tyvk15cg/