Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: jQuery Validation Plugin для валидации динамических input'ов

Приветствую Вас, профессионалы JavaScript!
Я мало программировал на JS(Ну точнее начинаю)...
Ммм, чему такое долгое вступление? О чем нужно спросите) Итак, к сути:]

На странице есть два блока с id="well_[номер]".
Каждое из них состоит из трех input полей (cost, name, description).
Схематично это выглядит так:
[well_1]
(cost_1)
(name_1)
(description_1)
[/well_1]
[well_2]
(cost_2)
(name_2)
(description_2)
[/well_2]
Эти блоки (их может быть более 2-х) загружаются из базы. Генерируется HTML и JS код интерпретатором PHP.
HTML - сами блоки
JS - код валидации для сгенерированных блоков(Ниже пример кода)
$("#bonuses").validate({
		rules: {
			cost_1: {
				required: true,
				digits: true,
				minlength: 1,
				maxlength: 10
			},
			name_1: {
				required: true,
				only_allowed_characters: true,
				minlength: 3,
				maxlength: 20
			},
			description_1: {
				required: true,
				only_allowed_characters: true,
				minlength: 20,
				maxlength: 200
			},
			cost_2: {
				required: true,
				digits: true,
				minlength: 1,
				maxlength: 10
			},
			name_2: {
				required: true,
				only_allowed_characters: true,
				minlength: 3,
				maxlength: 20
			},
			description_2: {
				required: true,
				only_allowed_characters: true,
				minlength: 20,
				maxlength: 200
			},
		},
	})
});

Все замечательно работает, формы проверяются. В плагин jQuery Validation путем проб и ошибок добавлен код, который активирует всплывающие сообщения плагина tipsy.

Проблема в том, что новые блоки well_№, которые добавляются в страницу на лету, не представляется возможности проверять так же, как и добавленные не на лету=[ Ибо (видимо) нельзя повторно добавить правила для той же таблицы и новых полей...

Пробовал добавлять следующим кодом:
eval'
$().ready(function() {
	$("#bonuses").validate({
		rules: {
			cost_'+count+': {
				required: true,
				digits: true,
				minlength: 1,
				maxlength: 10
			}, 
			name_'+count+': { 
				required: true, 
				only_allowed_characters: 
				true, minlength: 3, 
				maxlength: 20 
			}, 
			description_'+count+': {
				required: true, 
				only_allowed_characters: true, 
				minlength: 20, 
				maxlength: 200 
			}, 
		}, 
	}) 
});
';

Через eval(); Возможно криво и говнокодно, но с моими PHP'шными мозгами это был единственный выход... Код не давал ни ошибок ни результата...

Прошу помощи у гуру JavaScript и jQuery.
Используется плагин
Код прилагаю в архиве. Очень надеюсь на вашу помощь.
Спасибо!
Ответ: Позвольте я в вашей теме спрошу.
Помогите настроить плагин jquery validation. Необходимо изменить некоторые регулярки, например поле email по умолчанию считается валидным в виде "q@q",
описан так: "methods: {email: function( value, element ) {return this.optional( element ) || /^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i.test( value );
},}"? предположим, хочу чтоб вначале было минимум три символа перед "собакой"
меняю регулярку внутри "methods:" файла "jquery.validate.js" на:
"methods: {email: function( value, element ) {return this.optional( element ) || /^[a-z0-9_-]{3, }@[a-z0-9-]+\.[a-z]{2,6}$/i.test( value );
},}"
но результат валидации не меняется. Пробовал добавить свой метод, дописал внутрь methods: "mydate: function(value, element){ return this.optional(element) || /^[a-zа-я]+$/i.test(value);}" , в скрипт, в rules дописал: "newinput: {required: true, mydate: true}".
При отправке срабатывает required, но если добавить хоть один символ (даже цифру) в поле, то по клику на submit форма отправляется несмотря на то, что остальные поля невалидны, при чем уведомления об отправке как при штатной отправке не появляется. Что я делаю не так? Посмотреть можно тут: son.topdetal.com.ua/tab/myvalid/2.html
Вопрос: валидация полей через jquery validation.

Здравствуйте!
Пожалуйста, помогите разобраться с ситуацией.

На своем сайте в почтовых формах реализовал валидацию полей через специальный juery плагин jquery validation. В установке плагин оказался достаточно простым, проблем с ним не возникло.

Суть плагина заключается в том, что если поле не проходит проверку, то после поля появляется специальный label с классом .error , которому через css я могу задать любые стили.
Если же поле проходит валидацию, то label'у присваивается display:none, а input'у присваивается класс .valid .

Собственно вопрос заключается в следующем: как присвоить класс .valid не input'у, а еще одному label'у ?

заранее спасибо!
Ответ:
Сообщение от avanesov89
Собственно вопрос заключается в следующем: как присвоить класс .valid не input'у, а еще одному label'у ?
а html можно увидеть того что хотите получить ?
и посмотрите это ... для ошибок ввести 111
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style type="text/css">
.hide{
  display: none;
}
.hide.valid{
  display: inline-block;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
  <script>
$.validator.setDefaults({
    submitHandler: function() {
        alert("submitted!")
    }
});
$.validator.addMethod("test", function(value, element) {
    return !/(\d)\1{2,}/.test(value)
}, "Вот эта фигня не прокатит");
$(function() {
    $("#commentForm").validate({
        highlight: function(element, errorClass, validClass) {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
            var name = $(element).data("label");
            var lab = $('[for="' + name + '"]');
            lab.removeClass("valid")
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
            var name = $(element).data("label");
            var lab = $('[for="' + name + '"]');
            lab.addClass("valid")
        },
        rules: {
            field: {
                required: true,
                test: true
            },
            num: {
                required: true,
                test: true
            }
        }
    })
});
  </script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>
        <p><input class="left" id="num" name="num" data-label="m16"><label for="m16" class="hide" ><input class="left" id="m16" name="m16" value="всё ок в 1 поле"></label></p>
        <p><input class="left" id="field" name="field" data-label="m24"><label for="m24" class="hide"><input class="left" id="m24" name="m24" value="всё ок во 2 поле"></label></p>
        <p><input class="submit" type="submit" value="Submit"/></p>
    </fieldset>
</form>


</body>
</html>
Вопрос: jQuery Validation Plugin для динамических input на форме

Здравствуйте уважаемые форумчане.

Динамически добавляю на форму input следующего вида:
<input type="text" name="input_name[]" />

Но не могу сообразить, как можно применить jQuery Validation Plugin к этим динамически добавленным полям?

rules: {
input_name[]: {},
}


Делает валидацию только для первого добавленного поля, для остальных уже не применяется.
Ответ: Уже сам сообразил...
Вопрос: JQuery Validation Plugin для валидации динамических input' ов

Приветствую Вас, профессионалы JavaScript!
Я мало программировал на JS(Ну точнее начинаю)...
Ммм, чему такое долгое вступление? О чем нужно спросите) Итак, к сути:]

На странице есть два блока с id="well_[номер]".
Каждое из них состоит из трех input полей (cost, name, description).
Схематично это выглядит так:
[well_1]
(cost_1)
(name_1)
(description_1)
[/well_1]
[well_2]
(cost_2)
(name_2)
(description_2)
[/well_2]
Эти блоки (их может быть более 2-х) загружаются из базы. Генерируется HTML и JS код интерпретатором PHP.
HTML - сами блоки
JS - код валидации для сгенерированных блоков(Ниже пример кода)
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    $("#bonuses").validate({
        rules: {
            cost_1: {
                required: true,
                digits: true,
                minlength: 1,
                maxlength: 10
            },
            name_1: {
                required: true,
                only_allowed_characters: true,
                minlength: 3,
                maxlength: 20
            },
            description_1: {
                required: true,
                only_allowed_characters: true,
                minlength: 20,
                maxlength: 200
            },
            cost_2: {
                required: true,
                digits: true,
                minlength: 1,
                maxlength: 10
            },
            name_2: {
                required: true,
                only_allowed_characters: true,
                minlength: 3,
                maxlength: 20
            },
            description_2: {
                required: true,
                only_allowed_characters: true,
                minlength: 20,
                maxlength: 200
            },
        },
    })
});
Все замечательно работает, формы проверяются. В плагин jQuery Validation путем проб и ошибок добавлен код, который активирует всплывающие сообщения плагина tipsy.

Проблема в том, что новые блоки well_№, которые добавляются в страницу на лету, не представляется возможности проверять так же, как и добавленные не на лету=[ Ибо (видимо) нельзя повторно добавить правила для той же таблицы и новых полей...

Пробовал добавлять следующим кодом:
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
eval'
$().ready(function() {
    $("#bonuses").validate({
        rules: {
            cost_'+count+': {
                required: true,
                digits: true,
                minlength: 1,
                maxlength: 10
            }, 
            name_'+count+': { 
                required: true, 
                only_allowed_characters: 
                true, minlength: 3, 
                maxlength: 20 
            }, 
            description_'+count+': {
                required: true, 
                only_allowed_characters: true, 
                minlength: 20, 
                maxlength: 200 
            }, 
        }, 
    }) 
});
';
Через eval(); Возможно криво и говнокодно, но с моими PHP' шными мозгами это был единственный выход... Код не давал ни ошибок ни результата...

Прошу помощи у гуру JavaScript и jQuery.
Используется плагин
Код прилагаю в архиве. Очень надеюсь на вашу помощь.
Спасибо!
Ответ: Poznakomlus, а как же
Сообщение от Poznakomlus
'+count+'
? Это же из eval. Код в итоге нерабочий. Я понимаю реакцию программистов на eval, но тут проблема не в нем.
Даже этот код не работает:
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
rules = {};
rules['cost_'+count] = {
    required: true,
    digits: true,
    minlength: 1,
    maxlength: 10
};
rules['name_'+count] = {
    required: true,
    only_allowed_characters:
    true, minlength: 3,
    maxlength: 20
}
rules['description_'+count] = {
    required: true,
    only_allowed_characters: true,
    minlength: 20,
    maxlength: 200
};
$('#bonuses').validate({'rules': rules });
Тут нужно знать ООП. И посмотреть что творится в плагине jquery.validate.js
Вопрос: Jquery validation добавить метод валидации инпуту- заполнение из базы

Добрый день, дорогие форумчане!
У меня стоит такая задача- сделать собственное правило валидации на поле, которое заполняется с помощью autocomplete значениями из базы. Мне нужно сделать подсказку пользователю, если он пишет слово, не существующее в базе, то оно не проходит валидацию. Мой вариант такой, но он не работает (arr - это массив допустимых значений):
jQuery.validator.addMethod("select_method", function(value, element) {
var arr = [1, "2", "3"];
 return this.optional(element) || $.inArray(value, arr) != -1; 
},
);


Прошу помощи от профессионалов)) Сама только начинаю изучать JS, не судите строго.
Ответ:
Сообщение от t.soyuzova
так вот я и сравниваю значения из базы - они в массиве arr, с тем, которое ввел пользователь value.
Зачем? Autocomplete или "живой поиск", это нахождение в базе вариантов совпадающих с набором производящим клиентом. Сервер вернет только то, что есть. Валидация к этому отношения не имеет, и сравнивать ничего не надо - запрос к бузе, здесь будет сравнение.
Вопрос: jQuery validation

Скрипт состоит из двух функций:

Проблематика:
После загрузки страницы при пустых полях при первом нажатии на отправку формы запускается функция ajax() и вместо того, чтобы валидация val1() выдала значение false - она выдает значение true (m=0) и происходит дальнейшее выполнение функции ajax() - он лезет в send.php и возвращается с ошибкой.
При повторной попытке нажать на кнопку отправки формы валидация работает правильно, меняет значение m на 1 и показывает пользователю, что поля заполнены неправильно.

Нутром чую, что-то не так с переменной m. Можно ли вообще от нее избавиться?


Что нужно поменять в коде, чтобы при первом запуске валидация работала правильно?

function ajax() { //Ajax отправка формы
t=val1();
if (t===true) {
    var name = $("#name").val();
    var mail = $("#mail").val();
    var phone = $("#phone").val();
	//if (name <> NULL and )
    $.ajax({
        type: "POST",
        data: {name: name, mail: mail, phone: phone} ,
        url: "./send.php",
       success: function(data) {
		 
            $("#name").val('');
            $("#mail").val('');
            $("#phone").val('');
			
			$("#topresults").fadeIn();
            $("#topresults").html(data).delay(2000).fadeOut("slow");

           
        },
        error:  function(xhr, str){
            alert("Возникла ошибка!");
        }
    });
}
}

function val1(){ //Валидация формы
var m=0;

    $("#topfforma").validation(
        $("#name").validate({
            test: "blank letters", 
             invalid: function(){
				 m=1;
				//alert(m);
                if($(this).nextAll(".error").notExists()) {
                    $("#name").after('<div class="error">Введите корректное имя</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $("#name").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
        $("#mail").validate({
            test: "blank email",
             invalid: function(){
				 m=1;
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div class="error">Введите корректный email</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $("#mail").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
       
        $("#phone").validate({
            test: "blank", 
             invalid: function(){
				 m=1;
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div class="error">Введите телефон</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $("#phone").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        })
    );
	if (m==0) { return true;} else {return false; }
}
Ответ:
Сообщение от amjke
При абсолютно любых полях первый раз скрипт валидации не срабатывает. При повторении все ок.

Валидация через jQuery идет, как я понимаю
А проверку на загрузку DOM делаете, прежде чем вызывать функцию?
Вопрос: Проблема совместного использования Masked Input и jQuery Validation

Использую совместно два плагина:
  1. Masked Input Plugin - digitalbush.com/projects/masked-input-plugin/
  2. jQuery Validation Plugin - jqueryvalidation.org

Первый плагин использую для задания шаблона для поля "телефонный номер".
Формат шаблона и плейсхолдер:
$('#phone_field').mask('+7 (999) 999 - 99 - 99', {
		placeholder: '_'
	});

В результате в поле отображается шаблон: "+7 (___) ___ - __ - __", с возможностью ввода только цифр.

Второй плагин использую для валидации поля с параметром required (обязательное поле) и minlength (минимальное количество символов):
phone: {
		required: true,
		minlength: 10
	}

В параметре maxlength (максимальное количество символов) нет необходимости, так как оно ограничивается шаблоном плагина Masked Input.
Очевидно проверку нужно делать по параметру minlength.

Однако, при проверке поля плагином jQuery Validation, поле с телефонным номером помечается как "валидное", даже когда не было введено никаких значений.
Происходит это, судя по всему, потому что проверке подвергаются так же и сами символы шаблона, которых более чем minlenght: 10.

Подскажите пожалуйста, возможно ли както исключить из проверки плагином jQuery Validation символы шаблона?

p.s.: Допускается вынос символов "+7" из шаблона. Их можно разместить перед полем.
p.p.s.: Так же, есть вариант, использовать параметр digits: true (условием проверки будут только цифры) плагина jQuery Validation. Но в этом случае, поле всегда будет "невалидно", так как значение поля содержит помимо цифр символы шаблона ("+", "(", ")", "-", " ").
Ответ:
Сообщение от Sav2907
ну так не работает
где код?
Вопрос: Можно ли плагин jquery - validation применить для button, а не submit?

Проблема в следующем
валидация с помощью плагина jquery - validation во всех найденых мною в интернете примерах производится при операции submit

CODE (javascript):

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.         $("#reg_form").validate({
  4.                 rules: {
  5.                         login: {
  6.                                 required: true,
  7.                                 minlength: 5,
  8.                                 maxlength: 30
  9.                         },
  10. .
  11. .
  12. .



А можно ли эту валидацию, обязательно плагином jquery, засунуть в функцию которая будет вызываться по событию onclick кнопки
как то так

CODE (javascript):

  1. function test(){
  2.  
  3. 1. блок валидации
  4.  
  5. 2. блок кода который выполняется если валидация пройдена
  6. }

! Интересует именно валидация с плагином jquery - validation.
Ответ:


-----
Вопрос: плагин jquery - validation для button, а не submit

плагин jquery - validation для button а не submit

Тема в следующем
валидация с помощью плагина jquery - validation во всех найденых мною в интернете примерах производится при операции submit

Код:
<script type="text/javascript">
$(
document).ready(function(){
    $(
"#reg_form").validate({
        
rules: {
            
login: {
                
requiredtrue,
                
minlength5,
                
maxlength30
            
},
.
.



А можно ли эту валидацию, обязательно плагином jquery, засунуть в функцию которая будет вызываться по событию onclick кнопки
как то так

Код:
function test(){

1. блок валидации

2. блок кода который выполняется если валидация пройдена


PHP, JavaScript, SQL и другой код пишите внутри тегов [code=php]Тут код[/code]
Ответ: Попробуйте так:
Код:
function test (){
    $(
"#reg_form").validate({
        
/* параметры плагина */
    
}).submit();
}
$(
'some_button').on('click'test); 
Вопрос: Jquery validation если заполнено одно из полей

Хотел сделать форму, которая проверяет три поля, одно постоянно, а два других, только если они не заполнены.
При этом если заполнено mail ИЛИ phone, то форма отправляется. При этом на поле phone стоит маска. Кто знает как решить?
<form id="form_mid" class="big_form" action="php/send.php" method="post" novalidate="novalidate">
					
					<div class="form_mid_label">Напишите сферу вашего бизнеса</div>
					<input type="text" name="salon" placeholder="например,  автосалон">
					
					<div class="form_mid_label">Напишите ваш сайт, если есть</div>
					<input type="text" name="site" placeholder="например,  mazzmedia.ru">
					
					<div class="form_mid_label">Укажите имеющийся бюджет на тест</div>
					<input type="text" name="budjet" placeholder="например, 7000 руб">
					
					<div class="form_mid_label">Ваше имя</div>
                    <input type="text" name="name" placeholder="">
					
					<div class="form_mid_label mail">E-mail, если есть</div>
                    <input type="text" name="email" placeholder="например,  info@mazzmedia.ru">
					
					<div class="form_mid_label phone">Контактный номер</div>
					<input type="text" name="phone" placeholder="+7 (___) ___-__-__">
					
                    <button>ОТПРАВИТЬ</button>
                </form>

$("#form_mid").validate({
		rules: {
			budjet: {required: true},
			phone: {required: true},
			email: {required: false, email: true}
		},	
		messages: {
			budjet: {required: false},
			phone: {required: false, phone: false},
			email: {required: false, email: false}
		},
		submitHandler: function(form) {
			sendForm(form);
		}
	});



Сам я пробовал решить таким способом, но не получилось:

$("#form_mid button").click(function(){
	if ($("#form_mid input[name='email']").val == ""){
	$("#form_mid").validate({
		rules: {
			budjet: {required: true},
			phone: {required: true},
			email: {required: false, email: true}
		},	
		
		messages: {
			budjet: {required: false},
			phone: {required: false, phone: false},
			email: {required: false, email: false}
		},
		submitHandler: function(form) {
			sendForm(form);
		}
	});
	}
	else if ($("#form_mid input[name='email']").val != ""){
	$("#form_mid").validate({
		rules: {
			budjet: {required: true},
			phone: {required: false},
			email: {required: true, email: true}
		},	
		
		messages: {
			budjet: {required: false},
			phone: {required: false, phone: false},
			email: {required: false, email: false}
		},
		submitHandler: function(form) {
			sendForm(form);
		}
	});
	}	
	});
Ответ: Видел подобное решение в статье, переведенной через гугл, ниче не понял)

Спасибо большое, все работает. =)