Question

**更新了附加代码**

我正在为某人重新设计一个网站，并重用前一个开发人员的一些PHP代码。表单在流程页面上提交并执行验证服务器端。从用户体验的角度来看，这显然很糟糕。我正在尝试合并jquery验证。我更像是一名设计师，对php和中等jquery的知识有限。

它是一个非常简单的形式，最后有2个提交选项。 1个按钮支付支票，1个支付宝贝。

用于这些按钮的代码完全绕过了我的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字段添加规则对象，并从input元素中删除属性。

以下也不起作用：

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

但是，如果确实有效，则会出现一个极端情况，用户单击paypal按钮但表单未验证，然后用户修复验证错误并使用check提交表单按钮。在这种情况下，表单将与Submit=PayPal一起提交。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

可能正在发生的是内联-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/

php表单与jquery验证问题

2 个答案: