验证 jquery 问题

Question

我真的需要帮助，我正在处理验证表单，验证正在运行。我的问题是如何在该字段旁边显示特定于该字段的错误？ 现在如果用户输入了无效的电话和无效的邮件，它会在两个字段（电子邮件和电话）中显示“电话必须是 9-10 位”。所以我想要的是在每个字段中显示与该字段相关的错误。

$('.xone-contact').submit(function() {
  var $form = $(this);
  var $form1 = $(this);
  var $form2 = $(this);
  var submitData = $form.serialize();
  var $phone = $form1.find('input[name="phone"]');
  var $email = $form2.find('input[name="email"]');
  var $name = $form.find('input[name="name"]');
  var $message = $form.find('textarea[name="message"]');
  var $submit = $form.find('input[name="submit"]');
  var $dataStatus = $form.find('.data-status');
  var $dataStatus1 = $form1.find('.phone_error');
  var $dataStatus2 = $form2.find('.email_error');

  $email.attr('disabled', 'disabled');
  $phone.attr('disabled', 'disabled');
  $name.attr('disabled', 'disabled');
  $message.attr('disabled', 'disabled');
  $submit.attr('disabled', 'disabled');

  $dataStatus.show().html('<div class="alert alert-info"><strong>Loading...</strong></div>');

  $.ajax({ // Send an offer process with AJAX
    type: 'POST',
    url: 'assets/contact_form/process-contact.php',
    data: submitData + '&action=add',
    dataType: 'html',
    success: function(msg) {
      if (parseInt(msg, 0) !== 0) {
        var msg_split = msg.split('|');
        if (msg_split[0] === 'success') {
          $phone.val('').removeAttr('disabled');
          $email.val('').removeAttr('disabled');
          $name.val('').removeAttr('disabled');
          $message.val('').removeAttr('disabled');
          $submit.removeAttr('disabled');
          $dataStatus.html(msg_split[1]).fadeIn();
        } else {
          $phone.removeAttr('disabled');
          $email.removeAttr('disabled');
          $name.removeAttr('disabled');
          $message.removeAttr('disabled');
          $submit.removeAttr('disabled');
          $dataStatus.html(msg_split[1]).fadeIn();
          $dataStatus1.html(msg_split[1]).fadeIn();
          $dataStatus2.html(msg_split[1]).fadeIn();
        }
      }
    }
  });

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#" class="xone-contact">
  <div class="row">
    <div class="col-sm-12">
      <div class=" margin-b-20">
        <input type="text" name="name" class="form-control" id="name" placeholder="Full Name...." />
      </div>
      <div class=" margin-b-20">
        <input type="text" name="email" class="form-control" id="email" placeholder="Email Address...." />
        <div class="email_error">
        </div>
        <div class=" margin-b-20">
          <input type="text" name="phone" class="form-control" id="phone" placeholder="Phone Number..." />
          <div class="phone_error">
          </div>
        </div>
        <div class="col-sm-12">
          <textarea name="message" class="form-control margin-b-20" rows="5" id="massage" placeholder="Message...."></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 text-center">
          <div class="data-status"></div>
          <!-- data submit status -->
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 text-center">
          <button type="submit" name="submit" id="contact_submit button" class="btn btn-lg btn-skin-border btn-block margin-b-20">Send Message</button>
        </div>
      </div>
</form>
<!--form end-->

Answer 1

HTML5 表单输入具有自行检查模式的能力，因此无需将它们发送到服务器进行验证 - 您可以使用以下内容：

<input type=text pattern="[0-9]{9,10}" title="Enter 10 digits phone number" placeholder="phone">

title 属性用作输入错误时的错误消息。

Documentation on MDN

小提琴：https://jsfiddle.net/f298v432/

Answer 2

您可以使用此库Confere.js 来实现您的目标！
它现在正在大力发展，但我认为它满足您的需求。 对于电话验证，我认为您可以使用 min 和 max 规则，或者您可以使用以下方法实现自己的：

Confere.validaor("phone", function(name, value, params, options){
   return new Promise(function(resolve, reject){
      if(success){ resolve() } //when pass
      else{
         var error = new Error('Error Message');
         error.field = name;
         reject(error);
      }
   });
});

示例：

$('.x-contact-form').on('submit', function(e) {
  e.preventDefault();
  var confere = new Confere({
    rules: this
  })

  confere.validate().then(function() {
  
    //submit your form
    
  }).catch(function(err) {
  
  //remove all errors notifications
    Object.keys(confere.options.rules).map(function(key){
      $(`.${key}-group`).removeClass('has-error');
      $(`.${key}-group`).addClass('has-success');
      $(`#${key}_error`).text('');
    });
    
    //add errors on fields that failed validation
    Object.keys(err.result).map(function(key) {
      $(`.${key}-group`).addClass('has-error');
      $(`#${key}_error`).text(err.result[key][0].message);
    });
  });
});

<script src="https://cdn.rawgit.com/isneezy/confere.js/master/lib/confere.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form class="x-contact-form" style="max-width: 300px; margin: 10px">
  <div class="form-group name-group">
    <label>Name</label>
    <input class="form-control" name="name" data-rule="required|min:3|max:254" />
    <span id="name_error" class="text-danger"></span>
  </div>
  <div class="form-group email-group">
    <label>Email</label>
    <input class="form-control" name="email" data-rule="required|email|max:254" />
    <span id="email_error" class="text-danger"></span>
  </div>
  <div class="form-group phone-group">
    <label>Phone</label>
    <input class="form-control" name="phone" data-rule="required|max:9" />
    <span id="phone_error" class="text-danger"></span>
  </div>
  <div class="form-group message-group">
    <label>Message</label>
    <textarea class="form-control" name="message" data-rule="required|min:20|max:254"></textarea>
    <span id="message_error" class="text-danger"></span>
  </div>
  <input type="submit" class="btn btn-primary" value="Send" />
</form>