?
แEำ๊คฮ๏Lwebshll2019
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ืกืงืจ ืจืคืืื ืืคื ื ืืืคืื ืืืคืืจ ืงืืืข - ืฉืจื ืืืืืื</title>
<!-- Bootstrap CSS RTL -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
:root {
--primary-black: #000000;
--primary-white: #ffffff;
--gray-light: #f8f9fa;
--gray-medium: #6c757d;
--shadow: rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, var(--gray-light) 0%, var(--primary-white) 100%);
min-height: 100vh;
color: var(--primary-black);
}
.main-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
.form-card {
background: var(--primary-white);
border-radius: 20px;
box-shadow: 0 20px 60px var(--shadow);
overflow: hidden;
max-width: 600px;
width: 100%;
border: 2px solid var(--primary-black);
}
.form-header {
background: var(--primary-black);
color: var(--primary-white);
padding: 3rem 2rem 2rem;
text-align: center;
position: relative;
}
.logo {
max-width: 200px;
height: auto;
margin-bottom: 1.5rem;
background: white;
padding: 10px;
border-radius: 10px;
}
.form-header h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: 1px;
}
.form-header p {
font-size: 1.1rem;
opacity: 0.9;
margin: 0;
}
.form-body {
padding: 3rem 2rem;
}
.form-group {
margin-bottom: 2rem;
}
.form-label {
font-weight: 600;
color: var(--primary-black);
margin-bottom: 0.8rem;
display: block;
font-size: 1.1rem;
}
.form-control {
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 1rem 1.2rem;
font-size: 1rem;
transition: all 0.3s ease;
background: var(--primary-white);
}
.form-control:focus {
border-color: var(--primary-black);
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
background: var(--primary-white);
}
.form-control::placeholder {
color: var(--gray-medium);
opacity: 0.7;
}
.btn-primary {
background: var(--primary-black);
border: 2px solid var(--primary-black);
color: var(--primary-white);
padding: 1rem 3rem;
font-size: 1.1rem;
font-weight: 600;
border-radius: 12px;
transition: all 0.3s ease;
width: 100%;
}
.btn-primary:hover {
background: var(--primary-white);
color: var(--primary-black);
border-color: var(--primary-black);
transform: translateY(-2px);
box-shadow: 0 8px 25px var(--shadow);
}
.input-group-text {
background: var(--primary-black);
color: var(--primary-white);
border: 2px solid var(--primary-black);
border-left: none;
}
.input-group .form-control {
border-left: none;
}
.required {
color: #dc3545;
}
.form-footer {
text-align: center;
padding: 1rem 2rem 2rem;
background: var(--gray-light);
border-top: 2px solid #e9ecef;
}
.contact-info {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--gray-medium);
font-size: 0.9rem;
}
/* Styles pour le questionnaire mรฉdical */
.question-label {
font-size: 1.1rem !important;
font-weight: 600 !important;
margin-bottom: 1rem !important;
padding: 1rem !important;
background: var(--gray-light) !important;
border-radius: 8px !important;
border-right: 4px solid var(--primary-black) !important;
}
.radio-group {
margin: 1rem 0 1.5rem 2rem;
}
.form-check-inline {
margin-left: 2rem;
}
.form-check-input:checked {
background-color: var(--primary-black);
border-color: var(--primary-black);
}
.form-check-input:focus {
box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
}
.conditional-field {
margin-right: 2rem;
padding: 1rem;
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
border: 1px dashed var(--gray-medium);
}
.additional-field {
margin-top: 1rem;
padding: 1rem;
background: rgba(255, 193, 7, 0.1);
border-radius: 8px;
border: 1px solid var(--warning);
transition: all 0.3s ease;
}
.additional-field label {
font-weight: 600;
color: var(--primary-black);
margin-bottom: 0.5rem;
}
.additional-field textarea {
border-color: var(--warning);
}
.additional-field textarea:focus {
border-color: var(--warning);
box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}
.text-warning {
color: #f57c00 !important;
font-weight: 500;
}
hr {
border-color: var(--primary-black);
opacity: 0.3;
margin: 2rem 0;
}
@media (max-width: 768px) {
.form-header h1 {
font-size: 2rem;
}
.form-body {
padding: 2rem 1.5rem;
}
.logo {
max-width: 150px;
}
.contact-info {
flex-direction: column;
gap: 1rem;
}
}
</style>
</head>
<body>
<div class="main-container">
<div class="form-card">
<!-- Header with Logo -->
<div class="form-header">
<img src="https://www.sarah-hatwell.com/wp-content/uploads/2022/12/logo-sarah-hatwell-black-on-white-e1681676539810.jpg"
alt="ืฉืจื ืืืืืื" class="logo">
<h1>ืกืงืจ ืจืคืืื ืืคื ื ืืืคืื ืืืคืืจ ืงืืืข</h1>
<p>ื ื ืืื ืืช ืืกืงืจ ืืจืคืืื ืืฆืืจื ืืืืืงืช ืืืืื</p>
</div>
<!-- Form Body -->
<div class="form-body">
<form id="medicalForm" method="POST" action="">
<!-- Informations personnelles -->
<div class="row mb-4">
<div class="col-md-6">
<div class="form-group">
<label for="firstName" class="form-label">
ืฉื ืคืจืื <span class="required">*</span>
</label>
<input type="text" class="form-control" id="firstName" name="firstName"
placeholder="ืืื ืก ืฉื ืคืจืื" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="lastName" class="form-label">
ืฉื ืืฉืคืื <span class="required">*</span>
</label>
<input type="text" class="form-control" id="lastName" name="lastName"
placeholder="ืืื ืก ืฉื ืืฉืคืื" required>
</div>
</div>
</div>
<div class="form-group mb-4">
<label for="idNumber" class="form-label">
ืชืขืืืช ืืืืช <span class="required">*</span>
<small class="form-text text-muted d-block">Numรฉro d'identitรฉ</small>
</label>
<input type="text" class="form-control" id="idNumber" name="idNumber"
placeholder="ืืื ืก ืืกืคืจ ืชืขืืืช ืืืืช" required>
</div>
<div class="form-group mb-4">
<label for="phone" class="form-label">
ืืกืคืจ ืืืคืื <span class="required">*</span>
</label>
<input type="tel" class="form-control" id="phone" name="phone"
placeholder="050-1234567" required>
</div>
<hr class="my-4">
<h4 class="mb-4 text-center">ืฉืืืืช ืจืคืืืืืช</h4>
<!-- Question 1 -->
<div class="form-group">
<label class="form-label question-label">
1. ืืื ืืช ืืืจืืื/ืื ืืงื?
<small class="form-text text-muted d-block">รtes-vous enceinte/allaitante ?</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="pregnant" id="pregnant_yes" value="yes">
<label class="form-check-label" for="pregnant_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="pregnant" id="pregnant_no" value="no">
<label class="form-check-label" for="pregnant_no">ืื / Non</label>
</div>
</div>
</div>
<!-- Question 2 -->
<div class="form-group">
<label class="form-label question-label">
2. ืืื ืืช ื ืืืืช ืืืืื ืื?
<small class="form-text text-muted d-block">Prenez-vous des anticoagulants ?</small>
<small class="form-text text-warning d-block">(ืื ืื ืืืคืกืืง ืจืง ืขื ืืืฉืืจ ืจืืคื ืฉืืืข ืืคื ื ืืืืคืื)</small>
<small class="form-text text-muted d-block">(Si oui, arrรชter seulement avec accord mรฉdical une semaine avant traitement)</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="blood_thinners" id="blood_yes" value="yes">
<label class="form-check-label" for="blood_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="blood_thinners" id="blood_no" value="no">
<label class="form-check-label" for="blood_no">ืื / Non</label>
</div>
</div>
</div>
<!-- Question 3 -->
<div class="form-group">
<label class="form-label question-label">
3. ืืื ืืฉ ืื ืกืืจืช?
<small class="form-text text-muted d-block">Avez-vous du diabรจte ?</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="diabetes" id="diabetes_yes" value="yes">
<label class="form-check-label" for="diabetes_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="diabetes" id="diabetes_no" value="no">
<label class="form-check-label" for="diabetes_no">ืื / Non</label>
</div>
</div>
</div>
<!-- Question 4 -->
<div class="form-group">
<label class="form-label question-label">
4. ืืื ืืฉ ืื ืืขืืืช ืืืจืืื ืืืืช?
<small class="form-text text-muted d-block">Avez-vous des problรจmes hormonaux ?</small>
<small class="form-text text-warning d-block">(ืืืืืช ืืชืจืืก ืื ืืืืื ืช, ืืจืืงืืช ืคืืจืืืช...)</small>
<small class="form-text text-muted d-block">(Thyroรฏde dรฉsรฉquilibrรฉe, injections de fertilitรฉ...)</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="hormonal" id="hormonal_yes" value="yes">
<label class="form-check-label" for="hormonal_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="hormonal" id="hormonal_no" value="no">
<label class="form-check-label" for="hormonal_no">ืื / Non</label>
</div>
</div>
</div>
<!-- Question 5 -->
<div class="form-group">
<label class="form-label question-label">
5. ืืื ืืฉ ืืืื ืืืืืืืืื ืืช?
<small class="form-text text-muted d-block">Avez-vous une maladie auto-immune ?</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="autoimmune" id="autoimmune_yes" value="yes">
<label class="form-check-label" for="autoimmune_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="autoimmune" id="autoimmune_no" value="no">
<label class="form-check-label" for="autoimmune_no">ืื / Non</label>
</div>
</div>
<div class="conditional-field" id="autoimmune_details" style="display: none;">
<label for="autoimmune_which" class="form-label mt-3">
ืื ืื ืืืื?
<small class="form-text text-muted d-block">Si oui, laquelle ?</small>
</label>
<input type="text" class="form-control" id="autoimmune_which" name="autoimmune_which"
placeholder="ืคืจื ืืช ืืืืื / Prรฉcisez la maladie">
</div>
</div>
<!-- Question 6 -->
<div class="form-group">
<label class="form-label question-label">
6. ืืื ืืฉ ืืืงืช ืขืืจ?
<small class="form-text text-muted d-block">Avez-vous une inflammation de la peau ?</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="skin_inflammation" id="skin_yes" value="yes">
<label class="form-check-label" for="skin_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="skin_inflammation" id="skin_no" value="no">
<label class="form-check-label" for="skin_no">ืื / Non</label>
</div>
</div>
</div>
<!-- Question 7 -->
<div class="form-group">
<label class="form-label question-label">
7. ืืื ืืช ื ืืืืช ืืืงืืืื ืื ืกืืื?
<small class="form-text text-muted d-block">Consommez-vous de l'alcool ou des drogues ?</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="substances" id="substances_yes" value="yes">
<label class="form-check-label" for="substances_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="substances" id="substances_no" value="no">
<label class="form-check-label" for="substances_no">ืื / Non</label>
</div>
</div>
</div>
<!-- Question 8 -->
<div class="form-group">
<label class="form-label question-label">
8. ืืื ืืฉ ืื ืืืจืืืืช ืืืืขืืช?
<small class="form-text text-muted d-block">Avez-vous des allergies connues ?</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergies" id="allergies_yes" value="yes" onchange="togglePrecisions('allergies_details', this.checked)">
<label class="form-check-label" for="allergies_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="allergies" id="allergies_no" value="no" onchange="togglePrecisions('allergies_details', false)">
<label class="form-check-label" for="allergies_no">ืื / Non</label>
</div>
</div>
<div id="allergies_details" class="additional-field" style="display: none;">
<label class="form-label">ืคืจืืื / Prรฉcisions :</label>
<textarea class="form-control" name="allergies_details" rows="3" placeholder="ืื ื ืคืจื ืืืื ืืืจืืืืช ืืฉ ืื / Veuillez prรฉciser quelles allergies vous avez"></textarea>
</div>
</div>
<!-- Question 9 -->
<div class="form-group">
<label class="form-label question-label">
9. ืืื ืืฉ ืืืจืืื ืืืืืจืื ืืืืืฉืื?
<small class="form-text text-muted d-block">Avez-vous une allergie aux anesthรฉsiants ?</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="anesthetic_allergy" id="anesthetic_yes" value="yes">
<label class="form-check-label" for="anesthetic_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="anesthetic_allergy" id="anesthetic_no" value="no">
<label class="form-check-label" for="anesthetic_no">ืื / Non</label>
</div>
</div>
</div>
<!-- Question 10 -->
<div class="form-group">
<label class="form-label question-label">
10. ืืื ืืฉ ืืืืช ืขืืจ ืืืืืืจ ืืคื ืื? (ืืชืงืืคื ืฉืืฆื)
<small class="form-text text-muted d-block">Avez-vous une maladie de peau au niveau du visage ? (rรฉcemment apparue)</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="facial_skin" id="facial_yes" value="yes" onchange="togglePrecisions('facial_skin_details', this.checked)">
<label class="form-check-label" for="facial_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="facial_skin" id="facial_no" value="no" onchange="togglePrecisions('facial_skin_details', false)">
<label class="form-check-label" for="facial_no">ืื / Non</label>
</div>
</div>
<div id="facial_skin_details" class="additional-field" style="display: none;">
<label class="form-label">ืคืจืืื / Prรฉcisions :</label>
<textarea class="form-control" name="facial_skin_details" rows="3" placeholder="ืื ื ืคืจื ืืืื ืืืืช ืขืืจ ืืฉ ืื / Veuillez prรฉciser quelle maladie de peau vous avez"></textarea>
</div>
</div>
<!-- Question 11 -->
<div class="form-group">
<label class="form-label question-label">
11. ืืื ืืช ืืืงืืช ืชืจืืคื ืจืืืงืืื (ืชืจืืคื ื ืื ืคืฆืขืื) ืื ืืงืืช ื6 ืืืืฉืื ืืืจืื ืื?
<small class="form-text text-muted d-block">Prenez-vous du Roaccutane (mรฉdicament contre l'acnรฉ) ou en avez-vous pris dans les 6 derniers mois ?</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="roaccutane" id="roaccutane_yes" value="yes">
<label class="form-check-label" for="roaccutane_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="roaccutane" id="roaccutane_no" value="no">
<label class="form-check-label" for="roaccutane_no">ืื / Non</label>
</div>
</div>
</div>
<!-- Question 12 -->
<div class="form-group">
<label class="form-label question-label">
12. ืืื ืืช ืืืื ืื ืืืงืืช ืื ืืืืืืืืงื?
<small class="form-text text-muted d-block">รtes-vous malade ou prenez-vous des antibiotiques ?</small>
</label>
<div class="radio-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sick_antibiotics" id="sick_yes" value="yes">
<label class="form-check-label" for="sick_yes">ืื / Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sick_antibiotics" id="sick_no" value="no">
<label class="form-check-label" for="sick_no">ืื / Non</label>
</div>
</div>
</div>
<!-- Question 13 -->
<div class="form-group">
<label class="form-label question-label">
13. ืืื ืืฉ ืขืื ืืฉืื ืฉืื ื ืฆืจืืื ืืืขืช?
<small class="form-text text-muted d-block">Y a-t-il autre chose que je dois savoir ?</small>
</label>
<textarea class="form-control" name="additional_info" rows="4" placeholder="ืื ื ืืชื ืืื ืื ืืืืข ื ืืกืฃ ืฉืขืฉืื ืืืืืช ืจืืืื ืื / Veuillez รฉcrire ici toute information supplรฉmentaire qui pourrait รชtre pertinente"></textarea>
</div>
<div class="form-group mt-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="consent" name="consent" required>
<label class="form-check-label" for="consent">
ืื ื ืืืฉืจ/ืช ืฉืื ืืืืืข ืฉืืกืจืชื ื ืืื ืืืืืืง <span class="required">*</span>
<small class="form-text text-muted d-block">Je confirme que toutes les informations fournies sont correctes et exactes</small>
</label>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="update_commitment" name="update_commitment" required>
<label class="form-check-label" for="update_commitment">
ืื ื ืืชืืืื/ืช ืืืืืืข ืืืงืจื ืฉื ืฉืื ืื ืืื ืืืืืข ืืื <span class="required">*</span>
<small class="form-text text-muted d-block">Je m'engage ร prรฉvenir en cas de changement de toutes ces informations</small>
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">
<i class="fas fa-check me-2"></i>
ืฉืื ืกืงืจ ืจืคืืื
</button>
</form>
</div>
<!-- Footer -->
<div class="form-footer">
<h6>ืคืจืื ืืฆืืจืช ืงืฉืจ</h6>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>054-308-7696</span>
</div>
<div class="contact-item">
<i class="fas fa-palette"></i>
<span>ืืืคืืจ ืงืืืข ืืงืฆืืขื</span>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Function to toggle precision fields (global function)
function togglePrecisions(fieldId, show) {
const field = document.getElementById(fieldId);
if (field) {
if (show) {
field.style.display = 'block';
// Make textarea required when shown
const textarea = field.querySelector('textarea');
if (textarea) {
textarea.setAttribute('required', 'required');
}
} else {
field.style.display = 'none';
// Remove required and clear value when hidden
const textarea = field.querySelector('textarea');
if (textarea) {
textarea.removeAttribute('required');
textarea.value = '';
}
}
}
}
$(document).ready(function() {
// AJAX form submission
$('#medicalForm').on('submit', function(e) {
e.preventDefault(); // Empรชcher l'envoi normal du formulaire
// Validation cรดtรฉ client
if (!validateForm()) {
return false;
}
// Rรฉcupรฉrer toutes les donnรฉes du formulaire
var formData = new FormData(this);
// Dรฉsactiver le bouton d'envoi pendant le traitement
var submitBtn = $(this).find('button[type="submit"]');
var originalText = submitBtn.html();
submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>ืฉืืื...');
console.log('Form Data:', Array.from(formData.entries())); // Debug
// Envoyer les donnรฉes via AJAX
$.ajax({
url: 'ajax.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function(response) {
if (response.success) {
// Succรจs - afficher message de confirmation
showAlert('success', 'ืืืืคืก ื ืฉืื ืืืฆืืื! ื ืืืืจ ืืืื ืืืงืื ืืืคืฉืจื.');
// Rรฉinitialiser le formulaire aprรจs 2 secondes
setTimeout(function() {
$('#medicalForm')[0].reset();
$('#autoimmune_details').hide();
// Reset all radio button borders
$('.question-label').css('border-color', 'transparent');
}, 2000);
} else {
// Erreur - afficher message d'erreur
showAlert('danger', response.message || 'ืฉืืืื ืืฉืืืืช ืืืืคืก. ืื ื ื ืกื ืฉืื.');
}
},
error: function(xhr, status, error) {
console.error('AJAX Error:', error);
showAlert('danger', 'ืฉืืืื ืืืืืืจ ืืฉืจืช. ืื ื ื ืกื ืฉืื ืืืืืจ ืืืชืจ.');
},
complete: function() {
// Rรฉactiver le bouton d'envoi
submitBtn.prop('disabled', false).html(originalText);
}
});
});
// Fonction de validation cรดtรฉ client
function validateForm() {
var isValid = true;
var errors = [];
// Reset all borders first
$('.form-control').css('border-color', '#e9ecef');
$('.question-label').css('border-color', 'transparent');
// Validation du prรฉnom
var firstName = $('input[name="firstName"]').val();
if (!firstName || firstName.trim().length < 2) {
errors.push('ืฉื ืคืจืื ืืืื ืืืืื ืืคืืืช 2 ืชืืืื');
$('input[name="firstName"]').css('border-color', '#dc3545');
isValid = false;
}
// Validation du nom de famille
var lastName = $('input[name="lastName"]').val();
if (!lastName || lastName.trim().length < 2) {
errors.push('ืฉื ืืฉืคืื ืืืื ืืืืื ืืคืืืช 2 ืชืืืื');
$('input[name="lastName"]').css('border-color', '#dc3545');
isValid = false;
}
// Validation du numรฉro d'identitรฉ
var idNumber = $('input[name="idNumber"]').val();
if (!idNumber || idNumber.trim().length < 5) {
errors.push('ืืกืคืจ ืชืขืืืช ืืืืช ืื ืชืงืื');
$('input[name="idNumber"]').css('border-color', '#dc3545');
isValid = false;
}
// Validation du tรฉlรฉphone
var phoneField = $('input[name="phone"]');
if (phoneField.length > 0) {
var phone = phoneField.val();
if (!phone || phone.trim().length === 0) {
errors.push('ืืกืคืจ ืืืคืื ื ืืจืฉ');
phoneField.css('border-color', '#dc3545');
isValid = false;
} else {
var phoneRegex = /^[0-9\-\+\s\(\)]{10,15}$/;
if (!phoneRegex.test(phone.trim())) {
errors.push('ืืกืคืจ ืืืคืื ืื ืชืงืื');
phoneField.css('border-color', '#dc3545');
isValid = false;
}
}
}
// Validation des questions obligatoires (radio buttons)
var requiredQuestions = [
'pregnant', 'blood_thinners', 'diabetes', 'hormonal',
'autoimmune', 'skin_inflammation', 'substances', 'allergies',
'anesthetic_allergy', 'facial_skin', 'roaccutane', 'sick_antibiotics'
];
var hasRadioError = false;
requiredQuestions.forEach(function(question) {
if (!$('input[name="' + question + '"]:checked').length) {
var questionGroup = $('input[name="' + question + '"]').closest('.form-group');
questionGroup.find('.question-label').css('border-color', '#dc3545');
hasRadioError = true;
isValid = false;
}
});
// Validation des cases ร cocher obligatoires
var requiredCheckboxes = ['consent', 'update_commitment'];
requiredCheckboxes.forEach(function(checkbox) {
if (!$('input[name="' + checkbox + '"]:checked').length) {
var checkboxGroup = $('input[name="' + checkbox + '"]').closest('.form-group');
checkboxGroup.find('label').css('color', '#dc3545');
hasRadioError = true;
isValid = false;
}
});
if (hasRadioError) {
errors.push('ืืฉ ืืขื ืืช ืขื ืื ืืฉืืืืช ืืจืคืืืืืช ืืืืฉืจ ืืช ืืืกืืืืช');
}
// Validation des champs de prรฉcisions si visibles
if ($('#allergies_details').is(':visible')) {
var allergiesTextarea = $('#allergies_details textarea');
if (allergiesTextarea.length > 0) {
var allergiesDetails = allergiesTextarea.val();
if (!allergiesDetails || allergiesDetails.trim().length < 2) {
errors.push('ืืฉ ืืคืจื ืืช ืืืืจืืืืช');
allergiesTextarea.css('border-color', '#dc3545');
isValid = false;
}
}
}
if ($('#facial_skin_details').is(':visible')) {
var facialTextarea = $('#facial_skin_details textarea');
if (facialTextarea.length > 0) {
var facialSkinDetails = facialTextarea.val();
if (!facialSkinDetails || facialSkinDetails.trim().length < 2) {
errors.push('ืืฉ ืืคืจื ืืช ืืืืช ืืขืืจ');
facialTextarea.css('border-color', '#dc3545');
isValid = false;
}
}
}
// Validation du champ conditionnel autoimmune si visible
if ($('#autoimmune_details').is(':visible')) {
var autoImmuneInput = $('#autoimmune_details input');
if (autoImmuneInput.length > 0) {
var autoImmuneDetails = autoImmuneInput.val();
if (!autoImmuneDetails || autoImmuneDetails.trim().length < 2) {
errors.push('ืืฉ ืืคืจื ืืช ืืืืืช ืืืืืืืืืื');
autoImmuneInput.css('border-color', '#dc3545');
isValid = false;
}
}
}
// Afficher les erreurs s'il y en a
if (!isValid) {
showAlert('warning', errors.join('<br>'));
}
return isValid;
}
// Fonction pour afficher les alertes
function showAlert(type, message) {
var alertHtml = '<div class="alert alert-' + type + ' alert-dismissible fade show mt-3" role="alert">' +
'<div>' + message + '</div>' +
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
'</div>';
// Supprimer les anciennes alertes
$('.alert').remove();
// Ajouter la nouvelle alerte en haut du formulaire
$('#medicalForm').prepend(alertHtml);
// Faire dรฉfiler vers le haut pour voir l'alerte
$('html, body').animate({
scrollTop: $('#medicalForm').offset().top - 20
}, 500);
// Auto-supprimer l'alerte aprรจs 5 secondes pour les succรจs
if (type === 'success') {
setTimeout(function() {
$('.alert').fadeOut();
}, 5000);
}
}
// Show/hide conditional field for autoimmune question
$('input[name="autoimmune"]').on('change', function() {
const detailsField = $('#autoimmune_details');
if (this.value === 'yes' && this.checked) {
detailsField.show();
detailsField.find('input').attr('required', 'required');
} else {
detailsField.hide();
detailsField.find('input').removeAttr('required').val('');
}
});
// Reset border color when radio button is selected
$('input[type="radio"]').on('change', function() {
$(this).closest('.form-group').find('.question-label').css('border-color', 'transparent');
});
// Real-time validation for text inputs
$('.form-control').on('blur', function() {
if ($(this).attr('required') && !$(this).val().trim()) {
$(this).css('border-color', '#dc3545');
} else {
$(this).css('border-color', '#e9ecef');
}
});
$('.form-control').on('input', function() {
if ($(this).css('border-color') === 'rgb(220, 53, 69)' && $(this).val().trim()) {
$(this).css('border-color', '#e9ecef');
}
});
});
</script>
</body>
</html>