Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.08.2019, 08:42
Новичок на форуме
Отправить личное сообщение для fines179 Посмотреть профиль Найти все сообщения от fines179
 
Регистрация: 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.
Ответить с цитированием
  #2 (permalink)  
Старый 27.08.2019, 08:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,633

fines179,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 27.08.2019, 08:55
Новичок на форуме
Отправить личное сообщение для fines179 Посмотреть профиль Найти все сообщения от fines179
 
Регистрация: 27.08.2019
Сообщений: 5

Спасибо)
Ответить с цитированием
  #4 (permalink)  
Старый 27.08.2019, 09:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,633

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>
Ответить с цитированием
  #5 (permalink)  
Старый 27.08.2019, 09:38
Новичок на форуме
Отправить личное сообщение для fines179 Посмотреть профиль Найти все сообщения от fines179
 
Регистрация: 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>
Ответить с цитированием
  #6 (permalink)  
Старый 27.08.2019, 09:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,633

fines179,
не грузите скрипты дважды!!!
выберите что-то одно, или сжатую версию(min.js) или "полную" (.js) строки 47 - 50
Ответить с цитированием
  #7 (permalink)  
Старый 27.08.2019, 10:16
Новичок на форуме
Отправить личное сообщение для fines179 Посмотреть профиль Найти все сообщения от fines179
 
Регистрация: 27.08.2019
Сообщений: 5

Сообщение от рони Посмотреть сообщение
fines179,
не грузите скрипты дважды!!!
выберите что-то одно, или сжатую версию(min.js) или "полную" (.js) строки 47 - 50
все равно не работает
на reset - Cannot read property 'reset' of undefined;
на валидации - Cannot read property 'form' of undefined
Ответить с цитированием
  #8 (permalink)  
Старый 27.08.2019, 10:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,633

fines179,
где id в форме?
Сообщение от fines179
$('#dialogForm')[
Ответить с цитированием
  #9 (permalink)  
Старый 27.08.2019, 11:06
Новичок на форуме
Отправить личное сообщение для fines179 Посмотреть профиль Найти все сообщения от fines179
 
Регистрация: 27.08.2019
Сообщений: 5

Сообщение от рони Посмотреть сообщение
fines179,
где id в форме?
О, спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
открыть новую страницу в модальном окне maximamus Общие вопросы Javascript 2 09.12.2015 15:29
Не работает JavaScript в модальном окне Dealaxer Общие вопросы Javascript 5 07.03.2015 22:02
текст в модальном окне assd18 jQuery 0 17.09.2012 12:46
не работает форма в окне, вызванном jquery page slide ikar jQuery 0 31.07.2011 21:55
Данные в модальном окне lukingnu jQuery 3 03.08.2010 20:21