Я использую jQuery validator plugin в виде html.Ошибка при добавлении динамических правил валидации с использованием jQuery Validator
стороне клиента сценариев: Java Script/JQuery
Server Side Scripting: PHP
Я объясню форму первым. Моя форма содержит:
а) текстовое поле, которое принимает только электронный идентификатор
б) текстовой, чтобы добавлять комментарии.
с) текстовое поле для ввода имени пользователя
д) текстовое поле, чтобы ввести номер мобильного телефона (принимает только номер)
а) и б) являются постоянными жителями моя форма. Независимо от того, что происходит, они остаются в форме навсегда. Они похожи на семейных парней.
c) и d) являются временными. Их существование зависит от a). Это идентификатор электронной почты.
Если электронный идентификатор, введенный пользователем, не содержит в базе данных, с) и d) приходит в действие. Пользователь должен будет ввести свое имя пользователя и номер мобильного телефона, и все четыре поля должны быть проверены. Если нет, будут проверены только первые два поля. Я вроде как что-то испортил.
И я проверяю все эти поля с помощью плагина jQuery validator с клиентской стороны. Также есть подтверждение на стороне сервера. Я здесь не собираюсь. Пропустим это пока.
Чтобы проверить наличие электронной почты, я использую функцию плагина. Я попробовал два метода, чтобы включить/выключить правила проверки для c) и d), и оба из них потерпели неудачу. :)
<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 скрыто. Если идентификатор электронной почты не совпадает, я покажу им пользователя. И в это время имя и тип мобильного поля будут изменены на текст из скрытого. Иначе тип остается скрытым. Я где-то слышал, что скрытые поля не проверяются. Вот почему я взял этот маршрут.
Сначала я подумал о том, чтобы сделать скрипку. Но я работаю с пультом дистанционного управления, так что это из-за недостатка картинки. Может быть.
Первый способ Я пробовал.
$(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. Но это всего лишь демо. В любом случае, после успешного отказа моего первого метода, я попытался использовать свойство зависимости плагина. Там всегда план Б.: D
Вот Второй метод Я пробовал:
$(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');
}
});
});
Иногда Plan B также терпит неудачу. Итак, мы находим план C. Это он. Где я все-таки ошиблась? Gracias.
дистанционный способ работает хорошо. Я даже получаю ответ от страницы checkemail_exist.php, а также проверяется, что условия внутри успеха проверяются. Но правила валидации не добавляются и удаляются соответственно.
http://jsfiddle.net/arunpjohny/cmou8n6y/ –