3

我有一个使用 jquery 和 servlet 的简单表单。jquery 对 servlet 进行 ajax 调用，servlet 进行一些服务器端计算，然后通过 jQuery 在同一页面上显示结果。我不希望表单执行默认提交（并转到 servlet），因为我想留在同一页面上并动态显示结果。它完全按照我想要的方式工作：

HTML：

<form name="form1" action="FormHandler1" method="POST" class="stats-form">
    <input class="stats-input" id="number0" type="text" name="number0">
    <input id="number1" type="text" name="number1">
    <input id="number2" type="text" name="number2">
    <input id="number3" type="text" name="number3">
    <input type="submit" value="Calculate" class="calculate-stats" name="stats-submit">
</form>

jQuery：

form.submit (function(event) {
    $.ajax({
        type: form.attr("method"), // use method specified in form attributes
        url: form.attr("action"), // use action specified in form attributes (servlet)
        data: form.serialize(), // encodes set of form elements as string for submission
        success: function(data) {
            // get response form servlet and display on page via jquery 
        }
    });
    event.preventDefault(); // stop form from redirecting to java servlet page
});

现在，我想添加表单验证，因为 servlet 需要十进制数字来进行计算。应该只允许用户输入数字，不能输入其他字符。为此，我采用了流行的jQuery Validation插件。

验证按预期工作，但要对 servlet 进行 ajax 调用，我必须使用 jQuery Validation 提供的 submitHandler，而不是上面显示的 jQuery 提交方法。当我使用验证 submitHandler 时，执行提交时表单的默认操作，转到 servlet 页面而不是停留在同一页面上，以便在 jQuery 中动态显示我的结果。我必须向 formHandler 传递一个表单，而不是像以前那样的事件，这使我能够阻止默认操作。唯一的选择是返回 false，但它不起作用。在过去的两天里，我一直在努力解决这个问题，并且几乎用尽了我的 google-fu。这是让我悲伤的新代码：

form.validate({
       rules: {
            number0: ruleSet,
            number1: ruleSet,
            number2: ruleSet,
            number3: ruleSet,
        },
        submitHandler: function (form) {

            $.ajax({
                type: "POST",
                url: form.attr("action"),
                data: form.serialize(),
                success: function () {
                    // get response from servlet and display on page via jQuery 
                }
            });
            return false; // required to block normal submit ajax used
        }
 });

任何帮助将不胜感激，我想使用这个简洁的 jQuery 表单验证，但我可能只是从头开始编写自己的 jQuery 验证，以便我可以使用我已经工作的表单提交方法。

4

5 回答 5

8

当提交事件触发时，阻止表单提交已经太晚了。您应该绑定到提交按钮上的单击事件并使用 event.preventDefault() 阻止它提交。如果您的验证例程成功完成，您可以使用 $.serialize() 和 $.submit() 手动提交表单。

于 2013-10-16T00:02:09.147 回答
5

您可以将event其作为第二个参数，submitHandler并且可以在preventDefault其中执行。

submitHandler: function (form, event) {
    event.preventDefault();
    // your remaining code goes below this.
}
于 2015-02-18T08:05:22.410 回答
2

为了解决这个问题，我单独验证了表单提交处理程序。我只是在表单提交中检查有效性，只有在 true 时才执行 ajax 调用。这允许处理提交事件的操作（preventDefault()），无论是否进行了 ajax 调用。

form.validate({
    rules: {
        number0: ruleSet,
        number1: ruleSet,
        number2: ruleSet,
        number3: ruleSet,
    }
});

form.submit (function(event) {
    if (form.valid())
    {
        $.ajax({
            type: form.attr("method"), // use method specified in form attributes
            url: form.attr("action"), // use action specified in form attributes
            data: form.serialize(), // encodes set of form elements as string for submission
            success: function(data) {
                // get response from servlet and display on page via jQuery 
            }
        });
    }
    event.preventDefault(); // stop form from redirecting to java servlet page
});
于 2013-10-16T13:20:49.100 回答
-1 
$('#post_form_jason_data').click(function() {
$('#myform').validate({ 
    rules: {
        txtwtrt: {
            required: true
           // email: true
        },
        tax_name: {
            required: true,
            minlength: 5
        },
    tax_rate: {
            required: true
            //minlength: 5
        }
    }
});
alert('insert the value');
if (('#myform').valid()){


        $.ajax({
            url: "swt_tax_add.html",
            type: 'POST',
            data : $('#myform').serialize(),                
            success: function(msg) {
                window.location.href='swt_tax/?st=1';
                $('#message').html(msg);            

            }

        });
    }

        return false;
    });
于 2014-07-22T11:32:39.187 回答
-1

我知道很多人已经回答了，但我会在 2020 年展示我的整个代码

$(document).ready(function () {
    $("#PaymentModeForm").validate({
        rules: {
            "f_cheque_mode_display": {
                required: true,
            },
            "f_cheque_infavour": {
                required: true,
            },
            "f_cheque_payablein": {
                required: true,
            },
            "f_cheque_address": {
                required: true,
            },
            "f_cheque_mobileno": {
                required: true,
            },
            "f_bank_mode_display": {
                required: true,
            },
            "f_bank_beneficiary": {
                required: true,
            },
            "f_bank_acc": {
                required: true,
            },
            "f_bank_bankname": {
                required: true,
            },
            "f_bank_branchname": {
                required: true,
            },
            "f_bank_ifsc": {
                required: true,
            },
            "f_cod_mode_display": {
                required: true,
            },
            "f_cod_mode_charges": {
                required: true,
            },
            "f_razorpay_mode_display": {
                required: true,
            },
            "f_razorpay_key": {
                required: true,
            },
            "f_razorpay_secret": {
                required: true,
            }
        },
        messages: {
            "f_cheque_mode_display": {
                required: "Enter Payment mode display on website"
            },
            "f_cheque_infavour": {
                required: "Enter Infavour Of",
            },
            "f_cheque_payablein": {
                required: "Enter Payble In",
            },
            "f_cheque_address": {
                required: "Enter Courier Address",
            },
            "f_cheque_mobileno": {
                required: "Enter Mobile No",
            },
            "f_bank_mode_display": {
                required: "Enter Payment mode display on website"
            },
            "f_bank_beneficiary": {
                required: "Enter Beneficiary Name",
            },
            "f_bank_acc": {
                required: "Enter A/C No",
            },
            "f_bank_bankname": {
                required: "Enter Bank Name",
            },
            "f_bank_branchname": {
                required: "Enter Branch Name",
            },
            "f_bank_ifsc": {
                required: "Enter IFSC Code",
            },
            "f_cod_mode_display": {
                required: "Enter Payment mode display on website",
            },
            "f_cod_mode_charges": {
                required: "Enter COD Charges",
            },
            "f_razorpay_mode_display": {
                required: "Enter Payment mode display on website",
            },
            "f_razorpay_key": {
                required: "Enter Key Id",
            },
            "f_razorpay_secret": {
                required: "Enter Secret Key",
            }
        },
        submitHandler: function (form, e) { 
            e.preventDefault();
            var form = $(this);
            var url = "/PaymentModeSubmit";
            $.ajax({
            type: "POST",
            url: url,
            data: $("#PaymentModeForm").serialize(),
            success: function(data)
            {
                alert(data);
            }
            });      
        return false;
        }
    });
    return
});
于 2020-09-03T09:00:31.240 回答