通过javascript触发提交按钮时的表单验证

Question

我有一个以模式打开的表单。我想为此实现验证。但是，我尝试实现 jQuery 表单验证但徒劳无功。无法触发表单验证的主要原因是表单提交按钮是使用javascript触发的。当表单提交时，它不执行验证部分。

解决这个问题的方法是什么？

这里是表格::

<div id="__paymentModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Make Payment Request</h3>
    </div>
    <div class="modal-body">        
        <form method="post" action="" id="__paymentForm" class="form-horizontal">
            <input type="text" name="name" value="" placeholder="Payee Name">
            <input type="text" name="phone" value="" placeholder="Phone"/>
            <input type="text" name="address" value="" placeholder="Address"/>
            <input type="text" name="pincode" value="" placeholder="Pincode" />
            <input type="text" name="amount" value="" placeholder="Amount"/>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true" onclick="javascript: reset()">Close</button>
        <button class="btn btn-primary" onclick="javascript: sendPaymentRequest()">Save changes</button>
    </div>
</div>

以及触发表单提交的 JavaScript。

var paymentReqBttnObject = undefined;

function reset() {
    window.paymentReqBttnObject = undefined;
}

function openModalForPaymentReq(ele) {
    $('#__paymentForm input[type="text"]').val("");
    $('#__paymentModal').modal( { backdrop: false });
    window.paymentReqBttnObject = ele;
}

function sendPaymentRequest() {
    $.ajax({
        type: "post",
        url: url,
        data: $('#__paymentForm').serialize(),
        processData : true,
        dataType: 'html',
        beforeSend: function() {
                $('#__paymentModal').hide();
        },
        success: function(data, textStatus, xhr) {
                var json = $.parseJSON(data);
                if(json.success == "request_made") {
                    $(paymentReqBttnObject).addClass("btn-requested").html("Payment Requested");
                    $(paymentReqBttnObject).unbind("click");
                } else {

                }
                window.reset();
        },
        error: function(xhr, textStatus, errorThrown) {
            window.reset();

        }
    });
}

我也尝试了 jquery 表单验证器，但在提交表单时仍然没有显示任何错误。它直接进入只更新空值的数据库。

验证 jQuery

$(document).ready(function(){
    $("#__paymentForm").validate({
            rules: {
                phone: {           //input name: fullName
                    required: true,   //required boolean: true/false
                    minlength: 10,
                    maxlength: 10       
                },
                address: {
                        required: true
                },
                pincode: {
                        required: true,
                        minlength: 6,
                        maxlength: 6
                }
                amount: {
                        required: true
                }
            },
            messages: {               //messages to appear on error
                phone: {           //input name: fullName
                    required: "Your Phone Number",   //required boolean: true/false
                    minlength: "Correct contact number.",
                    maxlength: "Correct contact number."
                },
                address: {
                        required: "Where to collect money."
                },
                pincode: {
                        required: "Pincode is required to locate the city and all others.",
                        minlength: "Correct Pincode Please.",
                        maxlength: "Correect Pincode Please"
                }
                amount: {
                        required: "What is the amount."
                },
            },
            submitHandler: function(form) {
                   $(form).ajaxSubmit({
                        success: function(){
                            alert('inside');
                      }
                    });
            }

        });  
})

Answer 1

您的代码有一些问题：

• 在密码验证规则之后缺少,。这出现了两次。

• 内联事件 (onClick)。 jQuery 使得附加事件真正变得容易。在我的代码中，我将“关闭”按钮上的内联事件替换为：

  $('.modal-footer .btn').on('click', function(){ reset(); });
  

  这更容易阅读，并且很好地将 HTML 与您的 javascript 分开。在文档中阅读有关 .on() 的更多信息。

• 提交表单时触发验证插件。您的原始代码在单独的事件处理程序中使用了 ajax 请求，因此从未调用过该插件。您的提交按钮（“保存更改”）在<form> 标签之外，这是它不起作用的另一个原因。

我将您的按钮移到表单内并修复/改进了您的 javascript 的其他区域，因此它现在可以工作：http://jsfiddle.net/U2hHH/4/ - 目前格式不是很好，但它正在正确验证表单。

我在submitHandler: 回调中将您的ajax 函数合并为一个。 ajax 应该可以工作，但我不能保证，所以如果它不工作，请检查您的浏览器控制台。

Answer 2

您必须return false; 才能阻止点击事件的默认功能发生，如下所示：

function sendPaymentRequest() {
  $.ajax({
    ....
  });
  return false; // return false here
}

并更改您的点击：

onclick="javascript: return sendPaymentRequest()"

或者你可以这样做：

onclick="javascript: sendPaymentRequest(); return false;"