в модальном окне не работает скрипт проверки формы
Всем привет)
у меня есть два скрипта (их писал не я, что я думаю очевидно). Один создает модальное окно, другой проверяет формы, по отдельности они оба хорошо работают. Совместить их у меня не получается. Этот скрипт создает модальное окно:
$(document).ready(function() {close
$('.contact a').popUpForm({
container : '#formID',
onSuccess : function() { alert('Данные отправленный успешно'); },
onError : function() { alert('Данные не отправленны'); }
});
$('.one a').popUpForm({ 'container' : '#othercontainer' });
});
(function($) {
var e = window.console ? console.log : alert;
$.fn.popUpForm = function(options) {
// Выделяем место для присоединения формы
$("#popUpHide").length || $('<div id="popUpHide" />').appendTo('body').css('display','none');
// Контейнер ОБЯЗАТЕЛЕН
if(!options.container) { alert('Требуется контейнер с опциями'); return; }
// Опции и значения по умолчанию
var defaults = {
container : '',
modal : true,
resizeable : false,
width : 500,
title : 'Оформление заказа',
beforeOpen : function(container) {},
onSuccess : function(container) {},
onError : function(container) {}
};
var opts = $.extend({}, defaults, options);
// "this" в каждом цикле ссылается на единственный элемент DOM
// коллекции jQuery, с которой мы сейчас работаем
this.each(function() {
/* Нужно сохранить значение 'this' доступным для вызова $.load */
var $this = $(this);
/* Обрабатывать элемент будет только в случае, если это ссылка
* и она имеет значение в атрибуте href
*/
if (!$this.is('a') || $this.attr('href') == '') { return ; }
/* Для функции $.load() параметром является URL, за которым следует
* селектор ID для части страницы, который будет обрабатываться
*/
var SRC = $this.attr('href') + ' ' + opts.container;
/* Привязка события выполняется в возвратной функции в случае
* ошибки загрузки формы, или если пользователь нажал на ссылку до
* момента полной готовности модального диалога
*/
var formDOM = $("<div />").load(SRC, function() {
// Добавляем к странице
$('#popUpHide').append(formDOM);
// Создаем и сохраняем диалог
$(opts.container).dialog({
autoOpen : false,
width : opts.width,
modal : opts.modal,
resizable : opts.resizeable,
title : opts.title
});
/* Останавливаем обычное представление формы. Операцию нужно выполнять после
* создания диалога, так как форма еще не существует для передачи ее обработчику события
*/
$(opts.container).bind('submit', function(e) {
e.preventDefault();
ajaxSubmit($this[0]);
});
// Создаем привязку для ссылки переданной плагину
$this.bind('click', function(e) {
e.preventDefault();
opts.beforeOpen.call($this[0], opts.container);
$(opts.container).dialog('open');
});
});
});
function ajaxSubmit(anchorObj) {
//console.log(anchorObj);
var form = $(opts.container);
var method = form.attr('method') || 'POST';
$.ajax({
type : method,
url : form.attr('action'),
data : form.serialize(),
success : function() {
$(opts.container).dialog('close');
opts.onSuccess.call(anchorObj, opts.container);
window.location.href="site.php";
},
error : function() {
opts.onError.call(anchorObj, opts.container);
}
});
}
}
})(jQuery);
|
Этот скрипт проверяет формы
$(document).ready(function() {
// SUCCESS AJAX CALL, replace "success: false," by: success : function() { callSuccessFunction() },
$("[class^=validate]").validationEngine({
success : false,
failure : function() {}
})
});
jQuery.fn.validationEngine = function(settings) {
if($.validationEngineLanguage){ // IS THERE A LANGUAGE LOCALISATION ?
allRules = $.validationEngineLanguage.allRules
}else{
allRules = {"required":{ // Add your regex rules here, you can take telephone as an example
"regex":"none",
"alertText":"Внимание! Поле не должно быть пустым!",
"alertTextCheckboxMultiple":"* Пожалуйста, выберите опцию",
"alertTextCheckboxe":"* Опция не выбрана"},
"length":{
"regex":"Нет",
"alertText":"Между ",
"alertText2":" и ",
"alertText3": " символов"},
"minCheckbox":{
"regex":"none",
"alertText":"Выбрано слишком много!"},
"confirm":{
"regex":"none",
"alertText":"Поля не совпадают!"},
"telephone":{
"regex":"/^[0-9\-\(\)]+$/",
"alertText":"Некорректный номер телефона!"},
"email":{
"regex":"/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/",
"alertText":"Неправильный адрес!"},
"onlyNumber":{
"regex":"/^[0-9]+$/",
"alertText":"Только цифры!"},
"noSpecialCaracters":{
"regex":"/^[0-9a-zA-Zа-яА-Я]+$/",
"alertText":"Специальные символы запрещены!"},
"onlyLetter":{
"regex":"/^[а-яА-Я]+$/",
"alertText":"Только русские буквы!"}
}
}
settings = jQuery.extend({
allrules:allRules,
success : false,
failure : function() {}
}, settings);
$("form").bind("submit", function(caller){ // ON FORM SUBMIT, CONTROL AJAX FUNCTION IF SPECIFIED ON DOCUMENT READY
if(submitValidation(this) == false){
if (settings.success){
settings.success && settings.success();
return false;
}
}else{
settings.failure && settings.failure();
return false;
}
})
$(this).not("[type=checkbox]").bind("blur", function(caller){loadValidation(this)})
$(this+"[type=checkbox]").bind("click", function(caller){loadValidation(this)})
var buildPrompt = function(caller,promptText) { // ERROR PROMPT CREATION AND DISPLAY WHEN AN ERROR OCCUR
var divFormError = document.createElement('div')
var formErrorContent = document.createElement('div')
var arrow = document.createElement('div')
$(divFormError).addClass("formError")
$(divFormError).addClass($(caller).attr("name"))
$(formErrorContent).addClass("formErrorContent")
$(arrow).addClass("formErrorArrow")
$("body").append(divFormError)
$(divFormError).append(arrow)
$(divFormError).append(formErrorContent)
$(arrow).html('<div class="line10"></div><div class="line9"></div><div class="line8"></div><div class="line7"></div><div class="line6"></div><div class="line5"></div><div class="line4"></div><div class="line3"></div><div class="line2"></div><div class="line1"></div>')
$(formErrorContent).html(promptText)
callerTopPosition = $(caller).offset().top;
callerleftPosition = $(caller).offset().left;
callerWidth = $(caller).width()
callerHeight = $(caller).height()
inputHeight = $(divFormError).height()
callerleftPosition = callerleftPosition + callerWidth -30
callerTopPosition = callerTopPosition -inputHeight -10
$(divFormError).css({
top:callerTopPosition,
left:callerleftPosition,
opacity:0
})
$(divFormError).fadeTo("fast",0.8);
};
var updatePromptText = function(caller,promptText) { // UPDATE TEXT ERROR IF AN ERROR IS ALREADY DISPLAYED
updateThisPrompt = $(caller).attr("name")
$("."+updateThisPrompt).find(".formErrorContent").html(promptText)
callerTopPosition = $(caller).offset().top;
inputHeight = $("."+updateThisPrompt).height()
callerTopPosition = callerTopPosition -inputHeight -10
$("."+updateThisPrompt).animate({
top:callerTopPosition
});
}
var loadValidation = function(caller) { // GET VALIDATIONS TO BE EXECUTED
rulesParsing = $(caller).attr('class');
rulesRegExp = /\[(.*)\]/;
getRules = rulesRegExp.exec(rulesParsing);
str = getRules[1]
pattern = /\W+/;
result= str.split(pattern);
var validateCalll = validateCall(caller,result)
return validateCalll
};
var validateCall = function(caller,rules) { // EXECUTE VALIDATION REQUIRED BY THE USER FOR THIS FILED
var promptText =""
var isError = false
var prompt = $(caller).attr("name")
var caller = caller
for (i=0; i<rules.length;i++){
switch (rules[i]){
case "required":
_required(caller,rules)
break;
case "custom":
_customRegex(caller,rules,i)
break;
case "length":
_length(caller,rules,i)
break;
case "minCheckbox":
_minCheckbox(caller,rules,i)
break;
case "confirm":
_confirm(caller,rules,i)
break;
default :;
}
}
if (isError == true){
($("."+prompt).size() ==0) ? buildPrompt(caller,promptText) : updatePromptText(caller,promptText)
}else{
closePrompt(caller)
}
/* VALIDATION FUNCTIONS */
function _required(caller,rules){ // VALIDATE BLANK FIELD
callerType = $(caller).attr("type")
if (callerType == "text" || callerType == "password" || callerType == "textarea"){
if(!$(caller).val()){
isError = true
promptText += settings.allrules[rules[i]].alertText+"<br />"
}
}
if (callerType == "radio" || callerType == "checkbox" ){
callerName = $(caller).attr("name")
if($("input[name="+callerName+"]:checked").size() == 0) {
isError = true
if($("input[name="+callerName+"]").size() ==1) {
promptText += settings.allrules[rules[i]].alertTextCheckboxe+"<br />"
}else{
promptText += settings.allrules[rules[i]].alertTextCheckboxMultiple+"<br />"
}
}
}
}
function _customRegex(caller,rules,position){ // VALIDATE REGEX RULES
customRule = rules[position+1]
pattern = eval(settings.allrules[customRule].regex)
if(!pattern.test($(caller).attr('value'))){
isError = true
promptText += settings.allrules[customRule].alertText+"<br />"
}
}
function _confirm(caller,rules,position){ // VALIDATE FIELD MATCH
confirmField = rules[position+1]
if($(caller).attr('value') != $("#"+confirmField).attr('value')){
isError = true
promptText += settings.allrules["confirm"].alertText+"<br />"
}
}
function _length(caller,rules,position){ // VALIDATE LENGTH
startLength = eval(rules[position+1])
endLength = eval(rules[position+2])
feildLength = $(caller).attr('value').length
if(feildLength<startLength || feildLength>endLength){
isError = true
promptText += settings.allrules["length"].alertText+startLength+settings.allrules["length"].alertText2+endLength+settings.allrules["length"].alertText3+"<br />"
}
}
function _minCheckbox(caller,rules,position){ // VALIDATE CHECKBOX NUMBER
nbCheck = eval(rules[position+1])
groupname = $(caller).attr("name")
groupSize = $("input[name="+groupname+"]:checked").size()
if(groupSize > nbCheck){
isError = true
promptText += settings.allrules["minCheckbox"].alertText+"<br />"
}
}
return(isError) ? isError : false;
};
var closePrompt = function(caller) { // CLOSE PROMPT WHEN ERROR CORRECTED
closingPrompt = $(caller).attr("name")
$("."+closingPrompt).fadeTo("fast",0,function(){
$("."+closingPrompt).remove()
});
};
var submitValidation = function(caller) { // FORM SUBMIT VALIDATION LOOPING INLINE VALIDATION
var stopForm = false
$(".formError").remove()
var toValidateSize = $(caller).find("[class^=validate]").size()
$(caller).find("[class^=validate]").each(function(){
var validationPass = loadValidation(this)
return(validationPass) ? stopForm = true : "";
});
if(stopForm){ // GET IF THERE IS AN ERROR OR NOT FROM THIS VALIDATION FUNCTIONS
destination = $(".formError:first").offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1100)
return true;
}else{
return false
}
};
};
Методом вставки в разные функции 1ого скрипта alerta, нашел где работает js при вызове модального окна
$this.bind('click', function(e) {
в этой функции прописанный js код работает в модальном окне, вставил туда код для проверки форм и браузер пишет мне ошибку
Ошибка: $("[class^=validate]").validationEngine is not a function
Строка: 204
Я предполагаю, что моя проблема решается в пару строчек, js знаю на довольно поверхностном уровне, скорее всего базовый начальный, то есть можно сказать вообще не знаю... А начинать его изучать ради пару заветных строчек, у меня нет времени.. И хотелось бы увидеть конкретный ответ, что и куда(по возможности) вставить, что бы эти два скрипта заработали вместе. Заранее спасибо за понимание :) |
| Часовой пояс GMT +3, время: 23:47. |