Не работает валидация в модальном окне
Задача: создать таблицу, при нажатии на кнопку появляется модальное окно с формой, данные при заполнении которой, в последующем попадут в эту таблицу.
Пользуюсь плагинами 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,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Спасибо)
|
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>
|
возможно дело в подключении стилей и 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> |
fines179,
не грузите скрипты дважды!!! выберите что-то одно, или сжатую версию(min.js) или "полную" (.js) строки 47 - 50 |
Цитата:
на reset - Cannot read property 'reset' of undefined; на валидации - Cannot read property 'form' of undefined |
fines179,
где id в форме? Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 17:28. |