Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2021, 01:49
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Добавить валидацию формы в функцию
Приветствую!

По мотивам формы с проверкой домена, которую сделал рони https://javascript.ru/forum/dom-wind...ssylki-2.html#, сейчас делаю такую же проверку input в форме, которая открывается в диалоговом окне.

Что сейчас есть:
На основной странице, в хедере подключены необходимые файлы скриптов, так же, внизу страницы размещен код:
function submitEditableModelForm(){
    var _form = $("#editable_model_form");
    $.ajax({
        type: "POST",
        url: _form.attr('action'),
        data: _form.serialize(),
        dataType:"json",
        success: function (res) {
                if (res.code == 10000) {
                    $('.dialog_close_button').click()
                    $('.editable-page-model[data-id='+res.result.config_id+']').replaceWith(res.result.model_html)
                    addDialogEvent()
                    initSlide()
                }else{
                    layer.msg(res.message)
                }
        }
    });
}


На этой же странице есть ссылка, которая вызывает диалоговое окно с формой ввода:
<div class='editable-page-model'>
	<form id="editable_model_form" action="/home/page/model_link">
			<input type='text' name='text[0][content]' class="text" value="text[0][content]">
			<input type='text' name='text[1][content]' class="text" value="text[1][content]">

        <span dstype="error_msg"></span>		
        <div><a class="dssc-btn" dstype="select-124" href="javascript:void(0)" onclick="submitEditableModelForm()">Отправить</a></div>
	</form>
</div>
<script>
	$(document).ready(function() {
	$('a[dstype="select-124"]').click(function () {
		$('#editable_model_form').submit();
	});

		function extractDomain(url) {
			let domain;
			//find & remove protocol (http, ftp, etc.) and get domain
			if (url.indexOf("://") > -1) {
				domain = url.split('/')[2];
                } else {
				domain = url.split('/')[0];
			}
			
			//find & remove www
			if (domain.indexOf("www.") > -1) {
				domain = domain.split('www.')[1];
			}
			
			domain = domain.split(':')[0]; //find & remove port number
			domain = domain.split('?')[0]; //find & remove url params
			
			return domain;
		}
				
		$.validator.addMethod('removeLink', function(value, element) {
			let reg = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|(www\.)?[a-zA-Z0-9]+\.[^\s]{2,})/mig
			let match = value.match(reg);
			return !match || match.every(link => extractDomain(link) == 'javascript.ru')
		},
		'Форма содержит запрещённые ссылки');
		$('#editable_model_form').validate({
			errorPlacement: function(error, element) {
				$('span[dstype="error_msg"]').append(error);
			},
			submitHandler: function(form) {
				ds_ajaxpost('editable_model_form');
			},
			onkeyup: false,
			rules: {
				"text[0][content]": {
					required: true,
					maxlength: 150,
					removeLink: true
				},
				"text[1][content]": {
					required: true,
					maxlength: 150,
					removeLink: true
				}

			}
		});
	});
</script>


Если скрипт видит в поле input сторонний домен, то показывает сообщение 'Форма содержит запрещённые ссылки'. Это работает.
Однако нажав на кнопку отправить - сообщение успешно отправляется, хотя отправляться не должно, по задумке.
Кнопка Отправить имеет в своём коде onclick="submitEditableModelForm()".
Значит проверка проходит неправильно. Видимо проверку валидации поля нужно проводить и в функции submitEditableModelForm(), код которой расположен за пределами диалогового окна, на основной странице.
Но я не знаю как это сделать.
Можете помочь сделать проверку валидации для функции submitEditableModelForm(), если в этом причина?

Последний раз редактировалось Vaska, 05.06.2021 в 01:52.
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2021, 08:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Vaska,
код 2 строка 13 добавить в начало
if($('#editable_model_form').valid())
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2021, 13:27
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Сообщение от рони Посмотреть сообщение
Vaska,
код 2 строка 13 добавить в начало
if($('#editable_model_form').valid())
Добавил, не помогло:
$('a[dstype="select-124"]').click(function () {
	if($('#editable_model_form').valid());
	$('#editable_model_form').submit();
	});

Форма всё равно отправляется.
Ответить с цитированием
  #4 (permalink)  
Старый 05.06.2021, 15:36
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Пробовал так и не получилось:
$(function(){$("a[dstype="select-124"]").click(function(){
	if($("#editable_model_form").valid()){
	$('#editable_model_form').submit();
	}
    });
    });


$('a[dstype="select-124"]').click(function () {
	if($("#editable_model_form").valid()){
	$('#editable_model_form').submit();
	}
	});


var SUBMIT_FORM = true;
$('a[dstype="select-124"]').on('click',function(){
if (!$("#editable_model_form").valid()) return;
if (!SUBMIT_FORM) return;
SUBMIT_FORM = false;
$('#editable_model_form').submit();
});


Я думаю, что нужно убрать из кнопки onclick="submitEditableModelForm()"
<a class="dssc-btn" dstype="select-124" href="javascript:void(0)" onclick="submitEditableModelForm()">Отправить</a>


И оставить такую кнопку:
<a class="dssc-btn" dstype="select-124" href="javascript:void(0)">Отправить</a>

Далее сделать условие, что если при нажатии кнопки Отправить валидация проходит успешно,тогда передавать submit в функцию submitEditableModelForm(), чтобы форма отправлялась. А если не проходит, тогда не передавать.
Как бы это ещё сделать?

Последний раз редактировалось Vaska, 05.06.2021 в 16:24.
Ответить с цитированием
  #5 (permalink)  
Старый 05.06.2021, 16:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Vaska,
вопрос вы два раза форму шлёте на сервер?
клик убрать из 12 строки
в строку 49 добавить
onsubmit: false,


в function submitEditableModelForm() добавить проверку
if(_form.valid()) $.ajax({

Последний раз редактировалось рони, 05.06.2021 в 16:36.
Ответить с цитированием
  #6 (permalink)  
Старый 05.06.2021, 16:36
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Сообщение от рони Посмотреть сообщение
Vaska,
вопрос вы два раза форму шлёте на сервер?

if(_form.valid()) $.ajax({
Получается два раза.
Как сделать один раз, исходя из имеющегося кода?

Первый код нельзя убрать из основного файла странице, к нему обращаются много файлов диалоговых окон.
Ответить с цитированием
  #7 (permalink)  
Старый 05.06.2021, 16:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от Vaska
Как сделать один раз, исходя из имеющегося кода?
смотри пост #5
Ответить с цитированием
  #8 (permalink)  
Старый 05.06.2021, 17:08
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

рони,
Я удалил полностью строку 12, 13, 14. Сабмит же выполняет функция submitEditableModelForm().
Далее добавил условие как вы написали
if(_form.valid()) $.ajax({


Теперь всё хорошо работает.
Большое спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
найти связь формы ввода и crm Flexbe (лендинг) Дмитрий Краснов Работа 0 30.07.2016 12:55
Валидация формы Castromen Общие вопросы Javascript 2 18.03.2016 14:14
Установка дефолтных значений формы deonis Angular.js 4 03.08.2015 09:06
в модальном окне не работает скрипт проверки формы necroms jQuery 1 11.03.2011 15:14
Как осуществить валидацию только выбранных полей формы? Tomas jQuery 2 18.02.2011 06:44