验证 jquery 问题
Posted
技术标签:
【中文标题】验证 jquery 问题【英文标题】:Validation jquery issue 【发布时间】:2018-01-12 03:48:32 【问题描述】:我真的需要帮助,我正在处理验证表单,验证正在运行。我的问题是如何在该字段旁边显示特定于该字段的错误? 现在如果用户输入了无效的电话和无效的邮件,它会在两个字段(电子邮件和电话)中显示“电话必须是 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-->
【问题讨论】:
你可以使用一些验证库,这里有一个github.com/isneezy/confere.js如果你使用npm可以使用npm install confere.js --save
这里有很多验证插件,而不是重新发明***。 jQuery 验证就是其中之一:github.com/jquery-validation/jquery-validation
【参考方案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/
【讨论】:
【参考方案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>
【讨论】:
以上是关于验证 jquery 问题的主要内容,如果未能解决你的问题,请参考以下文章
IE 9 中的 Twitter Bootstrap + jQuery 验证问题