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/ - 目前格式化不是很好但是它正确验证了表单。

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

Answer 2

您必须return false;停止点击事件的默认功能，例如：

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

并更改你的onclick：

onclick="javascript: return sendPaymentRequest()"

或者你可以这样做：

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

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

2 个答案: