genvalidator: установите флажок в проверке формы
Я использую genvalidator, чтобы иметь некоторые тесты для полей ввода в форме. Проблема в том, что я не могу найти способ проверить, был ли установлен флажок. Вот как все поля установлены:
frmvalidator.addValidation("name","req","Insert your name");
frmvalidator.addValidation("city","req","Insert your city");
frmvalidator.addValidation("phone","req","Insert your phone number");
Это мой флажок
<input type="checkbox" name="agree" id="agree "value="yes"/>
Как я могу сделать это обязательно с genvalidator?
Это часть, которая обрабатывает процесс формы (вкратце: если ошибок нет, то все в порядке):
if(empty($name)||empty($city)||empty($phone)||BLAHBLAH)
{
$errors .= "\n Mandatory field. ";
}
if(empty($errors))
{
// send the email
}
Он попытался с этим кодом JS без удачи:
function validate(form) {
if(!document.form1.agree.checked){alert("Please check the terms and conditions");
return false; }
return true;
}
Если возможно, я бы хотел использовать функции genvalidator.:)
6 ответов
Вы тратите много энергии, пытаясь заставить работать плагин javascript.
Рассматриваете ли вы работать с JQuery? Если вы еще не пнули его шины, это намного проще, чем кажется - и намного более равномерно / быстрее печатать, чем обычные js.
Чтобы использовать jQuery, вам нужно всего лишь включить в документ библиотеку jQuery, обычно в тегах head:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Затем вы можете легко создавать свои собственные процедуры проверки с полным контролем над тем, что вы делаете.
Вот рабочий пример для изучения. Как видите, код довольно минимален.
При нажатии кнопки "Отправить" (#mysub) мы быстро проверяем каждое поле, чтобы убедиться, что оно проверено. Если какое-либо поле не проходит проверку, мы можем вернуть управление пользователю с полем, выделенным цветом и в фокусе.
Если все поля проходят проверку, мы выдаем submit() метод в форме идентификатора, и он идет (в место, указанное в action="somepage.php" атрибуты).
Обратите внимание, что я добавил быстрый / грязный код внизу, чтобы убрать любую окраску CSS из неудачных проверок. Этот код запускается каждый раз при выходе из поля, независимо от того, имеет ли это поле проверочную окраску или нет. Это не очень эффективно (хотя это, конечно, ничего не повредит) и предназначено только для демонстрации того, что возможно.
Hmmmmm. Я думаю, что было бы более эффективно иметь класс с определенными атрибутами и добавлять / удалять этот класс в случае неудачной проверки. Хорошо, мне понравилась эта идея настолько, что я создал новый jsFiddle, используя этот метод, чтобы продемонстрировать, как это будет выглядеть.
HTML:
<form id="fredform">
First Name: <input id="fname" name="fname" type="text"/>
Last Name: <input id="fname" name="fname" type="text"/>
Email: <input id="fname" name="fname" type="text"/>
<input id="mysub" type="button" value="Submit" />
</form>
JQuery:
arrValidate = ['fname','lname','email']
$('#mysub').click(function() {
var nextFld, i ;
for (i=0; i<arrValidate.length; i++){
nextFld = arrValidate[i];
if ( $('#'+nextFld).val() == '') {
alert('Please complete all fields. You missed the [' +nextFld+ '] field.');
$('#'+nextFld).css({'border':'1px solid red','background':'yellow'});
$('#'+nextFld).focus();
return false;
}
}
//if it gets here, all is okay: submit!
$('#fredform').submit();
});
//Remove any css validation coloring
$('input:not([type=button])').blur(function(){
$(this).css({'border':'1px solid lightgrey','background':'white'});
});
Обратите внимание, что есть также плагин для проверки jQuery, который выглядит очень профессионально. Я сам с этим не играл, всегда предпочитал кодировать свои вещи, но вот ссылка:
http://jqueryvalidation.org/documentation/
Обратите внимание на очень классную демонстрацию
Просто чтобы вы знали, чего ожидать: реализация этого плагина будет более сложной, чем методология, предложенная мной выше.
` ANSWER TO YOUR COMMENT QUESTION: `
Что касается вашего комментария и кода, размещенного на pastebin:
(Извините за длинный ответ, но я хочу, чтобы он был понятен. Пожалуйста, прочитайте внимательно.)
(1) Пожалуйста, поместите ваш код JavaScript в функцию document.ready. Это моя ошибка; Я должен был добавить его в мой пример кода. В противном случае код будет выполнен до полного существования DOM, и триггеры событий не будут привязаны к элементам управления (поскольку они еще не существуют в DOM). Следовательно:
arrValidate = ['checkbox']; //a global variable
$(document).ready(function() {
$('#submit').click(function() {
var nextFld, i ;
for (i=0; i<arrValidate.length; i++){
nextFld = arrValidate[i];
if ( $('#'+nextFld).val() == '') {
alert('Please complete all fields. You missed [' +nextFld+ ']');
$('#'+nextFld).css({'border':'1px solid red','background':'yellow'});
$('#'+nextFld).focus();
return false;
}
}
//if it gets here, all is okay: submit!
$('#contact_form').submit();
}); //END #submit.click
}); //END document.ready
(2) Ваш флажок все еще имеет value="yes" атрибут, который нарушает JavaScript. Пожалуйста, измените это:
<input type="checkbox" name="checkbox" id="checkbox" value="yes" /> <small>Ho
к этому:
<input type="checkbox" name="checkbox" id="checkbox" /> <small>Ho
(3) Нет необходимости иметь type="submit" для тебя <input value="Invia"> кнопка, и нет необходимости в name= атрибут на этом контроле.
Сначала name= Атрибут: это полезно только при передаче данных из этого элемента управления в файл PHP(?), который обрабатывает вашу форму: ($_SERVER['SCRIPT_NAME']). name= part - имя переменной, а значение элемента управления - значение переменной. Кнопка не имеет данных для передачи, поэтому ей не нужно присваивать имя переменной.
Далее type="submit": Это не обязательно, потому что вы можете использовать jQuery для отправки формы в любое время. В старые времена, до javascript/jQuery, у нас были формы. В те дни единственным способом подать форму было использование type="submit" приписывать. Не было такой команды как: $('#myFormId').submit(); - но сегодня есть. Так что измените этот атрибут на type="button" и позвольте jQuery отправить форму для вас. Поверь мне, это работает!
Еще одна вещь, чтобы рассмотреть: как только вы используете type="submit" Вы должны иметь дело с действиями формы по умолчанию при нажатии этой кнопки. Вы не можете просто вернуть управление пользователю в случае ошибки, потому что форма была отправлена. (Вы должны использовать event.preventDefault() переопределить поведение по умолчанию - вы можете прочитать об этом позже.)
(4) Значения флажков должны быть проверены с помощью одного из этих методов. Флажки не имеют значения. Это снова моя вина, я должен был поставить флажок в моем примере.
$('#submit').click(function() {
var nextFld, i ;
//Validate the checkbox:
if ( $('#checkbox').is(':checked') == false ) {
alert('You must read the informativa and check the checkbox at bottom of form');
return false;
}
//Validate the rest of the fields
for (i=0; i<arrValidate.length; i++){
(5) JQuery's submit() метод не будет работать, если какой-либо элемент использует =submit как его имя = или идентификатор = атрибут.
Это странная вещь, но вы должны это знать. Я только что изучил это (снова), устраняя неполадки моего примера jsFiddle.
Если вы хотите использовать jQuery для отправки вашей формы (и мы делаем) через .submit() метод, то ни один элемент в вашей форме не может иметь name= или же id= атрибут установлен на "отправить". Кнопка INPUT имела и name=, и id = установлен для отправки; Вот почему это не работает.
Ссылка: http://blog.sourcecoder.net/2009/10/jquery-submit-on-form-element-does-not-work/
Смотрите пересмотренный пример кода в jsFiddle:
Пожалуйста, пожалуйста, изучите вышеизложенное jsFiddle. Вы должны быть в состоянии полностью удалить плагин genvalidator. Если вы полностью понимаете jsFiddle, вы будете программистом на новом месте.
frmvalidator.addValidation("согласен","selmin=1","пожалуйста, установите флажок");
Это не проверено, но я думаю, что это будет выглядеть примерно так:
function DoCustomValidation() {
var frm = document.forms["myform"];
if(document.form1.agree.checked != true) {
sfm_show_error_msg('The Password and verified password does not match!',frm.pwd1);
return false;
}else{
return true;
}
}
Обратите внимание, что вы должны настроить эту строку, чтобы иметь правильное имя вашей собственной формы:
var frm = document.forms["myform"];
Кроме того, вам также необходимо связать функцию проверки с объектом проверки:
frmvalidator.setAddnlValidationFunction("DoCustomValidation");
Источник: документация genvalidator
Если вы используете jQuery, попробуйте проверить следующим образом:
function validate(form) {
if(!$('[name="agree"]').prop('checked')){
alert("Please check the terms and conditions");
return false;
}
return true;
}
или попробуйте использовать
function validate(form) {
if(!$('[name="agree"]')[0].checked){
alert("Please check the terms and conditions");
return false;
}
return true;
}
Добавьте новый div для определения местоположения ошибки над тегом ввода, например так:
<div name="formname_inputname_errorloc" class="errorstring">
//<your input tag goes here>
Убедитесь, что в вашем файле CSS есть класс css для errorstring. и другие файлы req js
Попробуйте найти демо для gen validator, это было полностью объяснено в демо
Поскольку вы пометили вопрос с помощью JQuery, это должно работать для вас:
function validate(form) {
if ($("#agree :checked").length < 1) {
alert("Please check the terms and conditions");
return false;
}
return true;
}
Я склонен использовать этот подход, потому что он также работает для нескольких флажков или групп переключателей. Обратите внимание, однако, что это не заботится о том, что было проверено, просто что-то было проверено.,, в случае единственного флажка это также действует как проверка "требуется проверить".