27.08.2019, 08:42
|
|
Новичок на форуме
|
|
Регистрация: 27.08.2019
Сообщений: 5
|
|
|
Не работает валидация в модальном окне
Задача: создать таблицу, при нажатии на кнопку появляется модальное окно с формой, данные при заполнении которой, в последующем попадут в эту таблицу.
Пользуюсь плагинами jQuery UI и jQuery validation,
при вызове модального окна через jQuery UI не работает валидация. Пишет при проверке валидности формы "if($('#dialogForm').valid() {}" "форма undefined". Да и вообще валидация внутри формы не работает. Также не работает сброс формы "reset". по отдельности валидация и модальное окно работают хорошо, а вместе никак
вот код
$('#dialogForm').validate({
onsubmit: false,
rules: {
form_name_сlient: {
required: true,
minlength: 3
},
form_number_сlient: {
number: true,
required: true
},
form_data: {
required: true,
date: true
},
type_appeal: {
required: true,
}
},
messages: {
form_name_сlient: {
required: 'Поле обязательно для заполнения',
minlength: 'Имя не короче 3х символов'
},
form_number_сlient: {
number: 'Поле заполнено некооректно',
required: 'Поле обязательно для заполнения'
},
form_data: {
required: 'Поле обязательно для заполнения',
date: 'Поле заполнено некооректно'
},
type_appeal: {
required: 'Поле обязательно для заполнения'
}
},
});
let table = $('table')[0];
let mesh = $('#dialog_window input');
let appealDialog = $('#dialog_window').dialog({
autoOpen: false,
modal: true,
buttons: {
'Добавить': function() {
//if($('#dialogForm').valid()){ не работает
$(`<tr><td>${mesh[0].value}</td>
<td>${mesh[1].value}</td>
<td>${mesh[2].value}</td>
<td>${$("[name='type_appeal']").val()}</td>
</tr>`).appendTo(table);
//}
$('#dialogForm')[0].reset();//тоже
$(this).dialog( "close" );
},
'Удалить': function() {
$('#dialogForm')[0].reset();
$(this).dialog( "close" );
},
}
});
$('#appeal').click(function(e) {
appealDialog.dialog('open');
});
Последний раз редактировалось fines179, 27.08.2019 в 08:54.
|
|
27.08.2019, 08:46
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
fines179,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
27.08.2019, 08:55
|
|
Новичок на форуме
|
|
Регистрация: 27.08.2019
Сообщений: 5
|
|
|
Спасибо)
|
|
27.08.2019, 09:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
fines179,
вы что-то не договариваите, всё работает.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<script>
$(function() {
$('#dialogForm').validate({
onsubmit: false,
rules: {
form_name_сlient: {
required: true,
minlength: 3
},
form_number_сlient: {
number: true,
required: true
},
form_data: {
required: true,
date: true
},
type_appeal: {
required: true,
}
},
messages: {
form_name_сlient: {
required: 'Поле обязательно для заполнения',
minlength: 'Имя не короче 3х символов'
},
form_number_сlient: {
number: 'Поле заполнено некооректно',
required: 'Поле обязательно для заполнения'
},
form_data: {
required: 'Поле обязательно для заполнения',
date: 'Поле заполнено некооректно'
},
type_appeal: {
required: 'Поле обязательно для заполнения'
}
},
});
let table = $('table');
let mesh = $('#dialog_window input');
let appealDialog = $('#dialog_window').dialog({
autoOpen: false,
modal: true,
buttons: {
'Добавить': function() {
if($('#dialogForm').valid()){
$(`<tr><td>${mesh[0].value}</td>
<td>${mesh[1].value}</td>
<td>${mesh[2].value}</td>
<td>${$("[name='type_appeal']").val()}</td>
</tr>`).appendTo(table);
}
$('#dialogForm')[0].reset();//тоже
$(this).dialog( "close" );
},
'Удалить': function() {
$('#dialogForm')[0].reset();
$(this).dialog( "close" );
},
}
});
$('#appeal').click(function(e) {
appealDialog.dialog('open');
});
});
</script>
</head>
<body>
<table>
</table>
<div id="dialog_window">
<form action="http://" id="dialogForm">
<input name="form_name_сlient" placeholder="для теста">
<input name="">
<input name="">
<input name="">
</form></div>
<button id="appeal">appeal</button>
</body>
</html>
|
|
27.08.2019, 09:38
|
|
Новичок на форуме
|
|
Регистрация: 27.08.2019
Сообщений: 5
|
|
возможно дело в подключении стилей и html-коде, но вроде как все хорошо
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
</head>
<body>
<table border="1" width="100%" cellpadding="10">
<h2>Написать обращение</h2>
<tr>
<th>
Имя клиента
</th>
<th>
Телефон
</th>
<th>
Дата обращения
</th>
<th>
тип обращения: вопрос, жалоба, благодарность.
</th>
</tr>
</table>
<div id='dialog_window' title='Новое обращение'>
<form name='dialogForm'>
<input type='text' name='form_name_сlient' placeholder="Введите имя">
<input type='number' name='form_number_сlient' placeholder='Введите номер телефона'>
<input type='data' name='form_data' placeholder="дата">
<select name='type_appeal'>
<option>
Вопрос
</option>
<option>
Жалоба
</option>
<option>
Благодарность
</option>
</select>
</form>
</div>
<button type='button' id='appeal'>
Новое обращение
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js" defer></script>
<script src="../../jquery-ui-1.12.1/jquery-ui.js" defer></script>
<script src='task21.js' defer></script>
</body>
</html>
|
|
27.08.2019, 09:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
fines179,
не грузите скрипты дважды!!!
выберите что-то одно, или сжатую версию(min.js) или "полную" (.js) строки 47 - 50
|
|
27.08.2019, 10:16
|
|
Новичок на форуме
|
|
Регистрация: 27.08.2019
Сообщений: 5
|
|
Сообщение от рони
|
fines179,
не грузите скрипты дважды!!!
выберите что-то одно, или сжатую версию(min.js) или "полную" (.js) строки 47 - 50
|
все равно не работает
на reset - Cannot read property 'reset' of undefined;
на валидации - Cannot read property 'form' of undefined |
|
27.08.2019, 10:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
fines179,
где id в форме?
|
Сообщение от fines179
|
|
$('#dialogForm')[
|
|
|
27.08.2019, 11:06
|
|
Новичок на форуме
|
|
Регистрация: 27.08.2019
Сообщений: 5
|
|
|
Сообщение от рони
|
fines179,
где id в форме?
|
О, спасибо!  |
|
|
|
