如何使用SilverStripe有效地在表单上的提交按钮中添加额外的自定义JQuery功能


How to effectively add additional custom JQuery function to Submit Button on Forms with SilverStripe

我正在使用SilverStripe 3.0和SilverStripe userforms子模块。这真的很难解释,所以请耐心等待。

我想在Form中添加一个自定义函数(检查文本区域字数),但我不确定如何最好地附加该函数,因为我不想破解核心验证js文件。

$('button[type="submit"]').entwine({
    onclick: function () {
        var $this = $('textarea.max-words');
        var wordcount = getWords($this);
        if (wordcount > maxWords) {
            if ($this.next().is("span")) {
                $('#maxwords-error').html(function () {
                    return spanText(wordcount, maxWords);
                });
            }
            else {
                $this.after(function () {
                    return "<span id='maxwords-error' class='required message'>" + spanText(wordcount, maxWords) + "</span>"
                });
                return false;
            }
        }
    }
})

银条使用纠缠库,所以我也尝试过这样做。

我的问题是这个

  1. 运行时,首先提示用户按照上述功能完成所需的字数计数
  2. 满足此条件后,将根据模块表单字段运行其他附加验证(例如,需要向电子邮件字段添加有效的电子邮件地址)
  3. 用户可以根据自定义功能完成字数统计,但如果验证的另一部分失败(例如,电子邮件字段不包含有效的电子邮件),用户可以添加电子邮件,但随后更改字数并成功提交。一旦函数成功,它似乎就再也不会运行了

如何让我的自定义函数在每次按下提交按钮时运行,无论之前的字数是正确的还是不正确的。

我认为您还应该取消点击事件,这样它就不会被传播。类似这样的东西(简化):

$('button[type="submit"]').entwine({
    onclick: function (evt) {
        if(wordCountValidationFailed){
            evt.preventDefault();
            evt.stopPropagation();
            evt.stopImmediatePropagation();
            return false;
        }
    }
});

这样可以确保一旦字数检查失败,事件管道的执行就会停止。如果除字数外的所有表单字段都有效,则应防止提交表单。