Вы затрачивая много энергии, пытаясь сделать яваскрипт работы плагина.
Считаете ли вы работу с jQuery? Если вы еще не пинали свои шины, это намного проще, чем кажется - и гораздо более однородным/быстрым, чем обычный js.
Чтобы использовать JQuery, вам нужно всего лишь включить библиотеку JQuery в документе, как правило, в голову теги, таким образом:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Затем, вы можете легко создавать свои собственные процедуры проверки, с полным контролем над тем, что ты делаешь.
Настоящий рабочий пример для вас. Как видите, код довольно минимальный.
При нажатии кнопки «Отправить» (#mysub) мы быстро проверяем каждое поле, чтобы проверить, проверено ли оно. Если какое-либо поле не проходит проверку, мы можем вернуть управление пользователю с цветом и фокусом поля.
Если все поля проходят проверку, то мы выдаем метод submit() на идентификаторе формы и выходим из него (в указанное в атрибуте action="somepage.php").
Обратите внимание, что я добавил некоторый быстрый/грязный код внизу, чтобы удалить любую раскраску css из неудачной проверки. Этот код запускается каждый раз, когда поле выходит из него, независимо от того, имеет ли поле проверку цвета или нет. Это не очень эффективно (хотя это, конечно, ничего не повредит) и предназначено только для демонстрации того, что возможно.
Хммммм. Я думаю, что было бы более эффективно иметь класс с определенными атрибутами и добавлять/удалять этот класс, если проверка отказов. Хорошо, мне понравилась эта идея, и я создал a new jsFiddle, используя этот метод, чтобы продемонстрировать, как это будет выглядеть.
jsFiddle here
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'});
});
Обратите внимание, что я s также плагин проверки jQuery, который выглядит очень профессионально. Я не играл с ним сам, всегда предпочитая закодировать свой собственный материал, но вот ссылка:
http://jqueryvalidation.org/documentation/
Обратите внимание на very cool demo
Только так вы знаете, чего ожидать: реализация этого плагина будет сложнее, чем методология, предложенная выше.
` ANSWER TO YOUR COMMENT QUESTION: `
Что касается комментарий и :
(Извините за длинный ответ, но я хочу, чтобы это было ясно, пожалуйста, внимательно прочитайте..)
(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= - это имя переменной, а значение элемента управления - значение переменной. Кнопка не имеет данных для передачи, поэтому нет необходимости назначать ей имя переменной.
Далее type="submit": Это не требуется, поскольку вы можете использовать jQuery для отправки формы в любое время. В старые времена, перед javascript/jQuery, у нас были формы. В те дни единственным способом сделать подачу формы было использование атрибута type="submit". Не было такой команды, как: $('#myFormId').submit(); - но сегодня есть. Поэтому измените этот атрибут на type="button" и дайте jQuery отправить форму для вас. Поверьте мне, это работает!
Еще одна вещь, которую следует учитывать: после использования type="submit" вы должны иметь дело с действиями формы по умолчанию при нажатии этой кнопки. Вы не можете просто вернуть управление пользователю при возникновении ошибки, так как форма была передана. (Вы должны использовать event.preventDefault() переопределить поведение по умолчанию -. Вы можете прочитать об этом позже)
(4) значения Флажок должны быть проверены с помощью one of these methods. Флажки не имеют значения. Это моя ошибка снова, я должен был бы установить флажок в свой пример.
$('#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 в submit() не будет работать, если любой элемент использует =submit либо как его имя = или ID = атрибут.
Это странно, но вам нужно это знать. Я только что узнал об этом (опять же), когда искал мой пример jsFiddle.
Если вы хотите использовать JQuery, чтобы отправить форму (и мы делаем) с помощью метода .submit(), то ни один элемент в вашей форме не может иметь name= или id= набор атрибутов для «представить». Кнопка INPUT имела и имя =иid = комплект для отправки; поэтому он не работал.
Ссылка: http://blog.sourcecoder.net/2009/10/jquery-submit-on-form-element-does-not-work/
См пересмотренный пример кода в jsFiddle:
Revised jsFiddle here
Пожалуйста, Пожалуйста, Пожалуйста, ознакомьтесь выше jsFiddle. Вы должны полностью сбрасывать плагин genvalidator. Если вы полностью поймете jsFiddle, вы станете новым программистом.
Определенно не дубликат этого вопроса. Этот вопрос относится конкретно к использованию javascript-плагина 'genvalidator'. – gibberish