Добавить валидацию формы в функцию
Приветствую!
По мотивам формы с проверкой домена, которую сделал рони 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,
код 2 строка 13 добавить в начало
if($('#editable_model_form').valid())
|
Цитата:
$('a[dstype="select-124"]').click(function () {
if($('#editable_model_form').valid());
$('#editable_model_form').submit();
});
Форма всё равно отправляется. |
Пробовал так и не получилось:
$(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,
вопрос вы два раза форму шлёте на сервер? клик убрать из 12 строки в строку 49 добавить onsubmit: false, в function submitEditableModelForm() добавить проверку
if(_form.valid()) $.ajax({
|
Цитата:
Как сделать один раз, исходя из имеющегося кода? Первый код нельзя убрать из основного файла странице, к нему обращаются много файлов диалоговых окон. |
Цитата:
|
рони,
Я удалил полностью строку 12, 13, 14. Сабмит же выполняет функция submitEditableModelForm(). Далее добавил условие как вы написали
if(_form.valid()) $.ajax({
Теперь всё хорошо работает. Большое спасибо! |
| Часовой пояс GMT +3, время: 16:48. |