0

我有一个以模式打开的表单。我想为此实现验证。但是，我尝试实现 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');
                      }
                    });
            }

        });  
})
4

2 回答 2

3

您的代码有一些问题：

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

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

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

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

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

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

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

于 2013-06-27T18:46:20.827 回答
-1

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

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

并更改您的点击：

onclick="javascript: return sendPaymentRequest()"

或者你可以这样做：

onclick="javascript: sendPaymentRequest(); return false;"
于 2013-06-27T18:20:39.407 回答