【问题标题】:Adding rules to existing jQuery form processing script向现有的 jQuery 表单处理脚本添加规则
【发布时间】:2026-01-25 06:50:01
【问题描述】:

我正在处理具有以下现有脚本的客户端站点:

/** Event Registration **/
var isSubmitingForm = false;
$(document).ready(function() {
    $("#eventRegForm").validate({
        invalidHandler: function(form, validator) {
            $("#eventRegForm span.input-text-error").removeClass("input-text-error");
            $("#eventRegForm div.textarea-error").removeClass("textarea-error");
        },
        submitHandler: function(form, validator) {
            $("#eventRegForm span.input-text-error").removeClass("input-text-error");
            $("#eventRegForm div.textarea-error").removeClass("textarea-error");
            var formData = "ServerProcess=true&FriendlyName=Event Registration&" + $("#eventRegForm").serialize();
            $.ajax({
                type: "POST",
                url: "/forms/generic",
                data: formData,
                beforeSend: function(){
                    if(!isSubmitingForm) {
                        isSubmitingForm = true;
                    } else {
                        return false;
                    }
                    $("#eventRegForm").prepend("<div class='loading'>Loading...<div>");
                },
                success: function (responseText) {
                    $("#eventRegForm").clearForm();
                    isSubmitingForm = false;
                    $("#eventRegForm div.loading").fadeOut(function() {
                        if($("#eventRegForm div.message").get(0)) {
                            $("#eventRegForm div.message").remove()
                        }
                        $("#eventRegForm").before("<div class='message message-success'><h5>Thank you for taking the time to complete this form.</h5>Your submission was sent.</div>");
                        $('html, body').animate({ scrollTop: 0 }, 'slow');
                        $('form#eventRegForm').fadeOut();
                    });
                },
                error: function (responseText) {
                    $("#eventRegForm").clearForm();
                    isSubmitingForm = false;
                    $("#eventRegForm div.loading").fadeOut(function() {
                        if($("#eventRegForm div.message").get(0)) {
                            $("#eventRegForm div.message").remove()
                        }
                        $("#eventRegForm div.line:eq(0)").before("<div class='message message-error'><h5>Error!</h5>An error has ocurred. Please try again.</div>");
                    });
                }
            });
        },
        rules: {
            eventRegFormName: {
                required: true
            },
            eventRegFormLastName: {
                required: true
            },
            eventRegFormEmail: {
                required: true
            }
        },
        messages: {


        },
        errorPlacement: function(error, element) {
            element.parent().addClass("input-text-error");
            element.parent().addClass("textarea-error");
        },
        onsubmit: true,
        onkeyup: false,
        onfocusout: false
    });

    $("#eventRegForm a.button").click(function () {
        $("#eventRegForm").submit();
    });
});

我无法编辑实时站点上的现有脚本,但我可以在将加载到页面上的包含文件中添加新的 jQuery。这里需要的是我在表单中向&lt;select&gt; 插入更多选项。有了这些新选项,现在需要选择字段本身;第一个默认选项将是空白/空值。

在我的新 jQuery 代码中,它将在上面的脚本文件之后运行,如果可能的话,如何添加更多规则?需要的&lt;select&gt;的ID是eventRegFormEventTitle。

【问题讨论】:

    标签: jquery json forms validation jquery-validate


    【解决方案1】:

    请参阅jQuery Validation documentation for rules

    $('#eventRegFormEventTitle').rules('add',{required:true});

    【讨论】: