Показать сообщение отдельно
  #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.
Ответить с цитированием