Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.03.2011, 15:13
Новичок на форуме
Отправить личное сообщение для necroms Посмотреть профиль Найти все сообщения от necroms
 
Регистрация: 11.03.2011
Сообщений: 2

в модальном окне не работает скрипт проверки формы
Всем привет)
у меня есть два скрипта (их писал не я, что я думаю очевидно). Один создает модальное окно, другой проверяет формы, по отдельности они оба хорошо работают. Совместить их у меня не получается.
Этот скрипт создает модальное окно:
$(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);
Ответить с цитированием
  #2 (permalink)  
Старый 11.03.2011, 15:14
Новичок на форуме
Отправить личное сообщение для necroms Посмотреть профиль Найти все сообщения от necroms
 
Регистрация: 11.03.2011
Сообщений: 2

Этот скрипт проверяет формы
$(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 знаю на довольно поверхностном уровне, скорее всего базовый начальный, то есть можно сказать вообще не знаю... А начинать его изучать ради пару заветных строчек, у меня нет времени..

И хотелось бы увидеть конкретный ответ, что и куда(по возможности) вставить, что бы эти два скрипта заработали вместе.
Заранее спасибо за понимание
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
скрипт работает в IE через раз jsVAN Internet Explorer 2 10.03.2011 03:27
Не работает скрипт :( VladimirV Javascript под браузер 5 21.12.2010 14:26
скрипт работает в IE не работает в Opera!!! Ikram Opera, Safari и др. 3 29.10.2010 10:04
скрипт на сайт под Джумлой, не работает в FF matysse Элементы интерфейса 1 11.10.2010 21:14
Скрипт меню-гармошки работает выборочно Extern Элементы интерфейса 2 23.02.2009 15:32