验证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>