[英]Error in adding dynamic validation rules using jQuery Validator
我正在以html形式使用jQuery验证程序插件 。
客户端脚本 : Java脚本/ jQuery
服务器端脚本 : PHP
我先解释一下表格。 我的表格包含:
a)仅接受电子邮件ID的文本字段
b)用于添加评论的文本区域。
c)输入用户名的文本字段
d)输入手机号码的文本字段(仅接受号码)
a)和b)是我表格的永久居民。 无论发生什么情况,它们都会永远保持形式。 他们就像家人一样。
c)和d)是暂时的。 它们的存在取决于a) 。 那是电子邮件ID。
如果用户输入的电子邮件ID不包含在数据库中,则c)和d)生效。 用户将必须输入其用户名和手机号码,并且所有四个字段都需要验证。 如果不是,将仅验证前两个字段。 我在这里有点混乱。
我正在使用客户端的jQuery验证程序插件来验证所有这些字段。 服务器端也有一个验证。 我不在这里。 让我们暂时跳过它。
要检查电子邮件是否存在,我使用了插件的远程功能。 我尝试了两种方法来打开/关闭c)和d)的验证规则,并且'em都失败了。 :)
<form role="form" id="product_description_form" name="product_description_form" method="POST" action="place_order_action.php" >
<div class="col-md-6 col-sm-6 title bg-black">
<div class="form-group">
<input type="text" id="email_id" name="email_id" class="form-control" placeholder="Email Address">
</div>
<div class="form-group">
<textarea type="text" id="product_description" name="product_description" class="form-control" placeholder="Comments"></textarea>
</div>
<div id="fullname_div" class="form-group" style="display:none;">
<input type="text" id="full_name" name="full_name" class="form-control" placeholder="Your Full Name">
</div>
<div id="mobilenum_div" class="form-group" style="display:none;">
<input type="text" id="mob_num" name="mob_num" class="form-control" placeholder="Contact Number">
</div>
<div class="col-md-12">
<input type="submit" name="submit" id="finish" value="CONFIRM NOW" class="btn btn-primary" />
</div>
</div>
</form>
最初,我将手机号码和div的名称隐藏起来。 如果电子邮件ID不匹配,我将向用户显示'em。 届时,名称和移动字段的类型将从隐藏更改为文本。 否则,该类型保持隐藏。 我在某处听说隐藏字段未得到验证。 这就是为什么我走这条路。
我想起初是摆弄小提琴。 但是我正在使用遥控器,所以您知道它有点不完整。 也许。
这是我尝试的第一种方法 。
$(document).ready(function() {
$('#product_description_form').validate({
rules: {
email_id: {
email: true,
required: true,
remote: {
url: "checkemail_exist.php",
type: "post",
dataType: 'html',
data: {
email_id: function() {
return $("#email_id").val();
}
},
success: function(dataa) {
var condition = dataa.trim();
//Invalid Data
if (condition == "2")
{
remove_validation();
document.getElementById('email_id').value = '';
document.getElementById('mobilenum_div').style.display = 'none';
document.getElementById('fullname_div').style.display = 'none';
document.getElementById('mob_num').value = '';
document.getElementById('full_name').value = '';
alert('Please enter a valid email id.');
}
//Existing User
else if (condition == "1")
{
remove_validation();
document.getElementById('mobilenum_div').style.display = 'none';
document.getElementById('fullname_div').style.display = 'none';
document.getElementById('mob_num').value = '';
document.getElementById('full_name').value = '';
document.getElementById('mob_num').type = 'hidden';
document.getElementById('full_name').type = 'hidden';
alert('We will contact you.');
}
//New User
else if (condition == "3")
{
add_validation();
document.getElementById('mob_num').type = 'text';
document.getElementById('full_name').type = 'text';
document.getElementById('mobilenum_div').style.display = 'block';
document.getElementById('fullname_div').style.display = 'block';
alert('New User.');
}
else
{
remove_validation();
document.getElementById('email_id').value = '';
document.getElementById('mobilenum_div').style.display = 'none';
document.getElementById('fullname_div').style.display = 'none';
document.getElementById('mob_num').value = '';
document.getElementById('full_name').value = '';
}
}
}
},
product_description: {
required: true,
minlength: 10
}
},
highlight: function(element) {
$(element).closest('.form-group').removeClass('success').addClass('error');
},
success: function(element) {
element.text('').addClass('valid')
.closest('.form-group').removeClass('error').addClass('success');
}
});
function add_validation()
{
$("#full_name").rules("add", "required");
$("#mob_num").rules("add", {number: true, required:true, minlength: 10, maxlength:12 });
}
function remove_validation()
{
$("#full_name").rules("remove", "required");
$("#mob_num").rules("remove", {number: true, required:true, minlength: 10, maxlength:12 });
}
});
你猜怎么了? 没用 我知道,我知道我正在混合使用jQuery和JavaScript。 但这只是一个演示。 无论如何,在第一种方法成功失败后,我尝试使用插件的depends属性。 总有一个计划B。
这是我尝试的第二种方法 :
$(document).ready(function() {
//Function to validate
$('#product_description_form').validate({
rules: {
email_id: {
email: true,
required: true,
remote: {
url: "checkemail_exist.php",
type: "post",
dataType: 'html',
data: {
email_id: function() {
return $("#email_id").val();
}
},
success: function(dataa) {
var condition = dataa.trim();
//Invalid Data
if (condition == "2")
{
document.getElementById('email_id').value = '';
document.getElementById('mobilenum_div').style.display = 'none';
document.getElementById('fullname_div').style.display = 'none';
document.getElementById('mob_num').value = '';
document.getElementById('full_name').value = '';
alert('Please enter a valid email id.');
}
//Existing User
else if (condition == "1")
{
document.getElementById('mobilenum_div').style.display = 'none';
document.getElementById('fullname_div').style.display = 'none';
document.getElementById('mob_num').value = '';
document.getElementById('full_name').value = '';
document.getElementById('mob_num').type = 'hidden';
document.getElementById('full_name').type = 'hidden';
alert('We will contact you.');
}
//New User
else if (condition == "3")
{
document.getElementById('mob_num').type = 'text';
document.getElementById('full_name').type = 'text';
document.getElementById('mobilenum_div').style.display = 'block';
document.getElementById('fullname_div').style.display = 'block';
alert('New User.');
}
else
{
document.getElementById('email_id').value = '';
document.getElementById('mobilenum_div').style.display = 'none';
document.getElementById('fullname_div').style.display = 'none';
document.getElementById('mob_num').value = '';
document.getElementById('full_name').value = '';
}
}
}
},
product_description: {
required: true,
minlength: 10
},
full_name:
{
required:
{
depends: function(element)
{
if (condition == "3")
{
return true;
}
else
{
return false;
}
}
}
},
mob_num:
{
required:
{
depends: function(element)
{
if (condition == "3")
{
return true;
}
else
{
return false;
}
}
},
number: true,
minlength: 10,
maxlength: 12
}
},
highlight: function(element) {
$(element).closest('.form-group').removeClass('success').addClass('error');
},
success: function(element) {
element.text('').addClass('valid')
.closest('.form-group').removeClass('error').addClass('success');
}
});
});
有时计划B也会失败。 因此,我们找到了计划C。就是这样。 我都在哪里弄错了? 格拉西亚斯。
远程方法效果很好。 我什至从checkemail_exist.php页面获得响应,并且也检查成功内是否包含if-else条件。 但是不会相应地添加和删除验证规则。
您以错误的方式进行操作,您可以仅隐藏元素,然后将不应用验证规则。
因此,您可以设置验证规则,然后可以使用更改事件处理程序,该处理程序可以根据电子邮件是否存在来设置这些元素的显示。
jQuery(function($) { $('#product_description_form').validate({ rules: { email_id: { email: true, required: true, }, product_description: { required: true, minlength: 10 }, full_name: { required: true }, mob_num: { number: true, required: true, minlength: 10, maxlength: 12 } } }); $('#email_id').change(function() { //based on the value set the display state of those fields //as a temp implementation we will just toggle the display //using timeout to simulate a async ajax setTimeout(function() { $('#mobilenum_div, #fullname_div').toggle(); }, 500); }); });
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script> <form role="form" id="product_description_form" name="product_description_form" method="POST" action="place_order_action.php"> <div class="col-md-6 col-sm-6 title bg-black"> <div class="form-group"> <input type="text" id="email_id" name="email_id" class="form-control" placeholder="Email Address"> </div> <div class="form-group"> <textarea type="text" id="product_description" name="product_description" class="form-control" placeholder="Comments"></textarea> </div> <div id="fullname_div" class="form-group" style="display:none;"> <input type="text" id="full_name" name="full_name" class="form-control" placeholder="Your Full Name"> </div> <div id="mobilenum_div" class="form-group" style="display:none;"> <input type="text" id="mob_num" name="mob_num" class="form-control" placeholder="Contact Number"> </div> <div class="col-md-12"> <input type="submit" name="submit" id="finish" value="CONFIRM NOW" class="btn btn-primary" /> </div> </div> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.