Jquery：使用插件 jquery validate 在单击后停止单击答案

【问题标题】：Jquery : Use the plugin jquery validate to stop a Click after just ClickingJquery：使用插件 jquery validate 在单击后停止单击
【发布时间】：2016-10-14 11:18:22
【问题描述】：

我在简单表单上使用插件 Jquery validate ，我的草图是：

1- 我点击了第一个按钮

2- 我在一个弹出窗口中填写表格（我正在设置一个名为 "montant"

的输入文本

3- 验证我会点击按钮 （这是一个简单的按钮，它不是 type=submit）

4-通常，当我点击第二个按钮而不填写所需的输入时，点击会中止/停止，这实际上不是我的情况

我的查看表单：

<form class="clearfix" id="form-candidature" method="post" action="api/condidaturepostulers">
       <h4 class="modal__subtitle">Postuler</h4>
       <div class="col-md-6 col-sm-6 col-xs-6 field">
         <label class="field-label">Montant: *</label>
         <input  class="field-input" name="montant" type="text">
       </div>
       <div class="col-md-12 col-sm-12 col-xs-12 field">
          <label class="field-label field-label--textarea">Message de motivation :</label>
          <textarea class="field-input field-input--textarea" name="msgMotivation"></textarea>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 txtright">
            <input id="submitCandidature" class="btn action-form btn-validate" value="Valider" data-modal="modal-validate">
            <input class="btn btn--gray action-form" type="button" value="Annuler" data-close="modal">
         </div>
</form>

在我的 Javascipt 文件中：

1 - 首先，我正在编写表单验证的功能：

candidatureValidate: function () {   
            $("form[id='form-candidature']").validate({
                rules: {
                    montant: {
                        required: true
                    }
                },
                messages: {
                    montant: "Veuillez entrer un montant"
                },

            })
  }

2- 之后，我将使用我的页面初始化该函数：

init: function () {
            for (var i in annonce.page) {
                if (annonce.page[i].length) {
                    this.candidatureValidate();
                    this.postulate();  // my principal funtion

                }
            }
},

3- 在我的主要功能（假设 ()）中，我正在调用我的验证功能：

postulate: function () {
            $('body').one().on('click', '#submitCandidature', function (e) {
                e.preventDefault();
                var FormCandidature = $("#form-candidature");
                var candidatureObject = serializeObject(FormCandidature);
                if (FormCandidature.valid()){
                    console.log(candidatureObject);
                    window.sendData.start(FormCandidature, candidatureObject, "#modal-postuler");
                }else {
                    e.stop();  // THis doesn't work
                }

   },

有什么建议吗？？？

【问题讨论】：

您的表单已经有动作标签，并且在假设函数中，而不是点击事件尝试使用 type="submit" 和 formID，然后阻止默认操作 ...
你的问题还是有点不清楚。如果您已正确初始化插件，则默认情况下表单提交已被阻止。由于您没有使用type="submit"，因此您只需将.valid() 放在click 处理程序中，任何表单错误都会阻止提交。

标签： javascript jquery jquery-validate

【解决方案1】：

使用 e.stopPropagation() 函数代替 e.stop()

【讨论】：

【解决方案2】：

这...

$('body').one().on('click', '#submitCandidature', function (e) { ...

使用.on() 或使用.one()。没有任何情况可以将它们链接在一起。也没有任何场景可以让.one() 留空。

根据jQuery .one() docs：

.one() 方法与.on() 相同，只是给定元素和事件类型的处理程序在第一次调用后未绑定。

试试这个吧……

$('body').one('click', '#submitCandidature', function (e) { ...

【讨论】：