487 lines
14 KiB
HTML
487 lines
14 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
<div class="page-header">
|
||
<h2>Ручное тестирование добавления партнера</h2>
|
||
<a href="{{ url_for('partners') }}" class="btn-back">Назад к списку</a>
|
||
</div>
|
||
|
||
<div class="test-container">
|
||
<div class="test-info">
|
||
<h3>Инструкция</h3>
|
||
<p>Заполните форму ниже и нажмите "Проверить данные". Тест покажет, пройдет ли проверку введенная информация.</p>
|
||
<p><strong>Правила валидации:</strong></p>
|
||
<ul>
|
||
<li>Наименование партнера - обязательно</li>
|
||
<li>Email - должен быть корректным (содержать @ и .)</li>
|
||
<li>ИНН - должен содержать 10 или 12 цифр</li>
|
||
<li>Телефон - форматируется автоматически</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="test-form">
|
||
<form id="partnerTestForm">
|
||
<div class="form-section">
|
||
<h3>Данные партнера</h3>
|
||
|
||
<div class="form-group">
|
||
<label for="name">Наименование партнера *</label>
|
||
<input type="text" id="name" name="name" class="test-input" placeholder="Например: ООО Ромашка">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="director">Директор</label>
|
||
<input type="text" id="director" name="director" class="test-input" placeholder="Например: Иванов И.И.">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group half">
|
||
<label for="email">Email *</label>
|
||
<input type="email" id="email" name="email" class="test-input" placeholder="test@mail.ru">
|
||
</div>
|
||
|
||
<div class="form-group half">
|
||
<label for="phone">Телефон</label>
|
||
<input type="tel" id="phone" name="phone" class="test-input" placeholder="+7 (999) 123-45-67">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="legal_address">Юридический адрес</label>
|
||
<textarea id="legal_address" name="legal_address" class="test-input" rows="2" placeholder="г. Москва, ул. Тестовая, д. 1"></textarea>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group half">
|
||
<label for="inn">ИНН *</label>
|
||
<input type="text" id="inn" name="inn" class="test-input" placeholder="10 или 12 цифр">
|
||
<small class="form-text">10 или 12 цифр</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-actions">
|
||
<button type="button" onclick="runTest()" class="btn-submit">Проверить данные</button>
|
||
<button type="button" onclick="fillValidData()" class="btn-valid">Заполнить валидные данные</button>
|
||
<button type="button" onclick="fillInvalidData()" class="btn-invalid">Заполнить невалидные данные</button>
|
||
<button type="reset" class="btn-reset">Очистить форму</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="test-result" id="testResult" style="display: none;">
|
||
<h3>Результат тестирования</h3>
|
||
<div id="resultContent"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function runTest() {
|
||
// Собираем данные из формы
|
||
const name = document.getElementById('name').value.trim();
|
||
const director = document.getElementById('director').value.trim();
|
||
const email = document.getElementById('email').value.trim();
|
||
const phone = document.getElementById('phone').value.trim();
|
||
const legal_address = document.getElementById('legal_address').value.trim();
|
||
const inn = document.getElementById('inn').value.trim();
|
||
|
||
// Выполняем валидацию
|
||
const validation = validatePartnerData(name, email, inn);
|
||
|
||
// Показываем результат
|
||
const resultDiv = document.getElementById('testResult');
|
||
const resultContent = document.getElementById('resultContent');
|
||
|
||
let html = '<table class="result-table">';
|
||
html += '<tr><th>Поле</th><th>Значение</th><th>Статус</th><th>Комментарий</th></tr>';
|
||
|
||
// Проверка имени
|
||
html += '<tr>';
|
||
html += '<td>Наименование</td>';
|
||
html += `<td>${name || '(пусто)'}</td>`;
|
||
if (name) {
|
||
html += '<td class="success">✓ OK</td>';
|
||
html += '<td>Поле заполнено</td>';
|
||
} else {
|
||
html += '<td class="error">✗ Ошибка</td>';
|
||
html += '<td>Наименование обязательно</td>';
|
||
}
|
||
html += '</tr>';
|
||
|
||
// Проверка email
|
||
html += '<tr>';
|
||
html += '<td>Email</td>';
|
||
html += `<td>${email || '(пусто)'}</td>`;
|
||
const emailValid = validateEmail(email);
|
||
if (emailValid) {
|
||
html += '<td class="success">✓ OK</td>';
|
||
html += '<td>Корректный email</td>';
|
||
} else {
|
||
html += '<td class="error">✗ Ошибка</td>';
|
||
html += '<td>Некорректный email (должен содержать @ и .)</td>';
|
||
}
|
||
html += '</tr>';
|
||
|
||
// Проверка ИНН
|
||
html += '<tr>';
|
||
html += '<td>ИНН</td>';
|
||
html += `<td>${inn || '(пусто)'}</td>`;
|
||
const innValid = validateINN(inn);
|
||
if (innValid) {
|
||
html += '<td class="success">✓ OK</td>';
|
||
html += '<td>Корректный ИНН (10 или 12 цифр)</td>';
|
||
} else {
|
||
html += '<td class="error">✗ Ошибка</td>';
|
||
if (!inn) {
|
||
html += '<td>ИНН обязателен</td>';
|
||
} else {
|
||
html += '<td>ИНН должен содержать 10 или 12 цифр</td>';
|
||
}
|
||
}
|
||
html += '</tr>';
|
||
|
||
// Директор (опционально)
|
||
html += '<tr>';
|
||
html += '<td>Директор</td>';
|
||
html += `<td>${director || '(не указан)'}</td>`;
|
||
html += '<td class="info">ℹ Опционально</td>';
|
||
html += '<td>Поле необязательное</td>';
|
||
html += '</tr>';
|
||
|
||
// Телефон (опционально)
|
||
html += '<tr>';
|
||
html += '<td>Телефон</td>';
|
||
html += `<td>${phone || '(не указан)'}</td>`;
|
||
html += '<td class="info">ℹ Опционально</td>';
|
||
html += '<td>Поле необязательное</td>';
|
||
html += '</tr>';
|
||
|
||
// Адрес (опционально)
|
||
html += '<tr>';
|
||
html += '<td>Адрес</td>';
|
||
html += `<td>${legal_address || '(не указан)'}</td>`;
|
||
html += '<td class="info">ℹ Опционально</td>';
|
||
html += '<td>Поле необязательное</td>';
|
||
html += '</tr>';
|
||
|
||
html += '</table>';
|
||
|
||
// Общий результат
|
||
const allValid = name && emailValid && innValid;
|
||
html += '<div class="summary">';
|
||
if (allValid) {
|
||
html += '<p class="success-message">✅ Все обязательные поля заполнены корректно! Форма может быть отправлена.</p>';
|
||
} else {
|
||
html += '<p class="error-message">❌ Есть ошибки в заполнении формы. Исправьте их перед отправкой.</p>';
|
||
}
|
||
html += '</div>';
|
||
|
||
resultContent.innerHTML = html;
|
||
resultDiv.style.display = 'block';
|
||
|
||
// Прокрутка к результатам
|
||
resultDiv.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
|
||
function validatePartnerData(name, email, inn) {
|
||
return {
|
||
nameValid: !!name,
|
||
emailValid: validateEmail(email),
|
||
innValid: validateINN(inn)
|
||
};
|
||
}
|
||
|
||
function validateEmail(email) {
|
||
if (!email) return false;
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
return emailRegex.test(email);
|
||
}
|
||
|
||
function validateINN(inn) {
|
||
if (!inn) return false;
|
||
const innRegex = /^\d{10}$|^\d{12}$/;
|
||
return innRegex.test(inn);
|
||
}
|
||
|
||
function fillValidData() {
|
||
document.getElementById('name').value = 'ООО "Тестовая компания"';
|
||
document.getElementById('director').value = 'Петров Петр Петрович';
|
||
document.getElementById('email').value = 'test@company.ru';
|
||
document.getElementById('phone').value = '+7 (495) 123-45-67';
|
||
document.getElementById('legal_address').value = 'г. Москва, ул. Тестовая, д. 10, офис 5';
|
||
document.getElementById('inn').value = '7701123456';
|
||
|
||
// Автоматически запускаем тест
|
||
runTest();
|
||
}
|
||
|
||
function fillInvalidData() {
|
||
document.getElementById('name').value = '';
|
||
document.getElementById('director').value = '';
|
||
document.getElementById('email').value = 'invalid-email';
|
||
document.getElementById('phone').value = '12345';
|
||
document.getElementById('legal_address').value = '';
|
||
document.getElementById('inn').value = '123';
|
||
|
||
// Автоматически запускаем тест
|
||
runTest();
|
||
}
|
||
|
||
// Форматирование телефона
|
||
document.getElementById('phone').addEventListener('input', function(e) {
|
||
let x = e.target.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
|
||
e.target.value = !x[2] ? x[1] : '+' + x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '');
|
||
});
|
||
|
||
// Валидация в реальном времени
|
||
document.getElementById('name').addEventListener('input', function() {
|
||
this.style.borderColor = this.value ? '#4CAF50' : '#ff6b6b';
|
||
});
|
||
|
||
document.getElementById('email').addEventListener('input', function() {
|
||
const valid = validateEmail(this.value);
|
||
this.style.borderColor = valid ? '#4CAF50' : '#ff6b6b';
|
||
});
|
||
|
||
document.getElementById('inn').addEventListener('input', function() {
|
||
const valid = validateINN(this.value);
|
||
this.style.borderColor = valid ? '#4CAF50' : '#ff6b6b';
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.test-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.test-info {
|
||
background-color: #F5F5F5;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 30px;
|
||
border-left: 4px solid #696969;
|
||
}
|
||
|
||
.test-info h3 {
|
||
color: #696969;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.test-info ul {
|
||
margin-left: 20px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.test-info li {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.test-form {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 25px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.form-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-section h3 {
|
||
color: #696969;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 600;
|
||
color: #555;
|
||
}
|
||
|
||
.test-input {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 2px solid #E0E0E0;
|
||
border-radius: 4px;
|
||
font-family: 'Calibri', sans-serif;
|
||
font-size: 1rem;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.test-input:focus {
|
||
outline: none;
|
||
border-color: #696969;
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
.form-group.half {
|
||
flex: 1;
|
||
}
|
||
|
||
.form-text {
|
||
display: block;
|
||
color: #666;
|
||
font-size: 0.85rem;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.test-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.btn-submit {
|
||
background-color: #696969;
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 25px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.btn-submit:hover {
|
||
background-color: #555;
|
||
}
|
||
|
||
.btn-valid {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 25px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.btn-valid:hover {
|
||
background-color: #45a049;
|
||
}
|
||
|
||
.btn-invalid {
|
||
background-color: #ff6b6b;
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 25px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.btn-invalid:hover {
|
||
background-color: #ff5252;
|
||
}
|
||
|
||
.btn-reset {
|
||
background-color: #E0E0E0;
|
||
color: #696969;
|
||
border: none;
|
||
padding: 12px 25px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.btn-reset:hover {
|
||
background-color: #D0D0D0;
|
||
}
|
||
|
||
.test-result {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 25px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
border-top: 4px solid #696969;
|
||
}
|
||
|
||
.test-result h3 {
|
||
color: #696969;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.result-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.result-table th {
|
||
background-color: #696969;
|
||
color: white;
|
||
padding: 10px;
|
||
text-align: left;
|
||
}
|
||
|
||
.result-table td {
|
||
padding: 10px;
|
||
border-bottom: 1px solid #E0E0E0;
|
||
}
|
||
|
||
.result-table .success {
|
||
color: #4CAF50;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.result-table .error {
|
||
color: #ff6b6b;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.result-table .info {
|
||
color: #2196F3;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.summary {
|
||
text-align: center;
|
||
padding: 15px;
|
||
background-color: #F5F5F5;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.success-message {
|
||
color: #4CAF50;
|
||
font-weight: 600;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.error-message {
|
||
color: #ff6b6b;
|
||
font-weight: 600;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.form-row {
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
.test-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn-submit, .btn-valid, .btn-invalid, .btn-reset {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %} |