Question

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

这个概念是这样的：

用户点击提交按钮 - '美化我'。
如果未填写三个必填字段（#name-input，#email-input，#phone-input）中的一个（或全部），则错误类别为.validation-error）应该添加到未填充的那个。并且，整个事情应该立即滚动到#validation-fail-msg，如果发生错误则会显示（默认情况下此消息被隐藏）。

我在我的“创作”附加了一个codepen，所以如果有机会你可以帮忙。提前谢谢你们。

<div class="b-form-wrap">
  <p id="validation-fail-msg">Please, fill in the missing fields.</p>
  <form novalidate id="feedback-form">
    <div class="b-form-box">
      <p class="form-box__text form-box__text_no-pad">What's your name?<sup class="form-box__sup">*</sup></p>
      <input type="text" name="name" maxlength="30" required id="name-input" class="form-box__input-field">
      <p class="form-box__text">What's your phone number?<sup class="form-box__sup">*</sup></p>
      <input type="text" name="phone" maxlength="30" required id="phone-input" class="form-box__input-field">
      <p class="form-box__text">What's your email?<sup class="form-box__sup">*</sup></p>
      <input type="text" name="email" maxlength="50" required id="email-input" class="form-box__input-field">
    </div>
    <div class="b-form-box b-form-box_left-mrg">
      <p class="form-box__text form-box__text_no-pad">How can I help you?</p>
      <textarea name="text" class="form-box__input-field form-box__input-field_textarea"></textarea>
    </div>
    <button class="form-box__button">Beautify me</button>
    <p id="validation-success-msg">Thanx, I'll contact you very soon.</p>
  </form>

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;
}

Answer 1

我构建了一个jsfiddle，我认为它符合预期的功能：

$(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);

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

希望它有所帮助！

我自己的jQuery验证版本

1 个答案: