我自己版本的jQuery验证

我是jQuery新手，所以我正在尝试创建自己的表单验证。 AJAX提交很好，但是验证本身让我很痛苦

其概念是：

用户单击提交按钮-“美化我”

如果三个必填字段（

#姓名输入

，

#电子邮件输入

，

#电话输入

）中的一个（或全部）未填写，则应将错误类（

。验证错误

）添加到未填写的字段中。而且，整个过程应该立即滚动到

#validation fail msg

，如果发生错误，就会显示该消息（默认情况下，此消息是隐藏的）

我附上了我的“创作”代码笔，所以你可能会帮助，如果有机会。 提前谢谢各位

我在我认为符合预期功能的地方建立了一个

$(document).ready(function(){
  $(".form-box__button").click(function(e){
    e.preventDefault();    
    feedback_validate();
  });
});

基本上，我为按钮添加了一个阻止表单提交的处理程序（您应该手动处理），并调用了验证函数，这是以前没有调用过的。我还添加了滚动功能在特定情况下的失败消息显示

---

希望有帮助

你有什么特别的问题吗？乍一看，您应该在表单的submit事件中调用validation函数（不要忘记使用默认值！）。您还应该包括一个具体的问题，即我创建的验证将不起作用，特别是根据我想要实现的想法。上面写着，塞巴斯蒂安，很多次。但有一件事发生了。正如我所提到的，我已经完成了AJAX提交，它以前工作得很好，但现在，在实现代码之后，它就不工作了。很抱歉问一下，有机会知道原因吗？我在AJAX提交中附加了JS代码的一部分。当然在这种情况下，按钮的单击处理程序将阻止其默认功能，即提交表单。这就是为什么表单的“提交”事件的事件处理程序不会被触发。您只需在验证之后（如果验证通过），将单击处理程序的代码移动到提交处理程序中，或者在单击处理程序中发出ajax请求即可。Sebastian，我严重地做错了smth，因为现在我已经在同一时刻完成了所有事情。我指的是成功的验证和失败的验证。首先，我尝试在ajax中加入“防止默认”，反之亦然。但我还是有些困惑。我是否应该删除剪切prevent.default后剩下的document.ready代码？上帝我有点困惑。检查答案中的小提琴，只是更新了它。在检查验证是否返回true（即：如果验证成功，我发出ajax请求）之后，我在click事件处理程序中添加了ajax调用。在这种情况下，submit事件处理程序是冗余的，因此您可以将其删除（如果您在该处理程序中执行其他操作，只需将其移动到click事件处理程序）

function feedback_validate() {
  var result = true;
  var f_names = ["#name-input", "#email-input", "#phone-input"];
  var el;

  f_names.forEach(function(item) {
      el = $(item);
      if (el.val() == "") {
        result = false;
        el.addClass("validation-error");
      } else {
        el.removeClass("validation-error");
      }    
  });

  if (result) {
    $("#validation-fail-msg").hide();
  } else {
    $("#validation-fail-msg").show();
  }

  return result;
}

$(document).ready(function(){
  $(".form-box__button").click(function(e){
    e.preventDefault();    
    feedback_validate();
  });
});

if (result) {
    $("#validation-fail-msg").hide();
  } else {
    $("#validation-fail-msg").show();

    $('html, body').animate({
        scrollTop: $("#validation-fail-msg").offset().top
    }, 1000);