refactor: form validation

This commit is contained in:
bobbyvish
2024-04-18 11:54:28 +05:30
parent ddced5b98f
commit 61313ad7d2
4 changed files with 121 additions and 18 deletions

View File

@@ -12,10 +12,13 @@ from module_project import constants, date_utils
from module_project.service import OneSignalNotificationService
from module_project.utils import ApiResponse
from ..models import (BeverageRecord, FoodIngredientRecord, FoodIngredintDataset, Bowel, ChronicCondition, FoodRecord, Intolerance, MealRecord,
MealSymptomRecord, Medication, PastTreatment,
PrincipalHealthData, Symptoms)
from .serializers import (FoodDatasetSerializer, FoodIngredientDatasetSerializer, BowelSerializer, ChronicConditionSerializer,
from ..models import (BeverageRecord, Bowel, ChronicCondition,
FoodIngredientRecord, FoodIngredintDataset, FoodRecord,
Intolerance, MealRecord, MealSymptomRecord, Medication,
PastTreatment, PrincipalHealthData, Symptoms)
from .serializers import (BowelSerializer, ChronicConditionSerializer,
FoodDatasetSerializer,
FoodIngredientDatasetSerializer,
IAmPrincipalSerializer, IntoleranceSerializer,
MealRecordSerializer, MealSymptomRecordSerializer,
MedicationSerializer, PastTreatmentSerializer,

View File

@@ -1,4 +1,2 @@
{% load static%}
<script src="{% static 'src/plugins/src/flatpickr/flatpickr.js' %}"></script>
<script src="{% static 'src/plugins/src/flatpickr/custom-flatpickr.js' %}"></script>
<script src="{% static 'src/plugins/src/flatpickr/flatpickr.js' %}"></script>

View File

@@ -22,7 +22,7 @@
<div class="statbox widget box box-shadow">
<div class="widget-content widget-content-area">
<form method="post">
<form method="post" id="principalForm">
{% csrf_token %}
{% include 'base_structure/includes/dynamic_template_form.html' with form=form %}
<div class="mt-4 mb-0">
@@ -41,6 +41,106 @@
{% endblock content %}
{% block javascript %}
<!-- include required js cdn link through html here -->
<!-- include required js cdn link through html here -->
<script>
$(document).ready(function() {
// Add custom validation method for email
$.validator.addMethod("validEmail", function(value, element) {
return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(value);
}, "Please enter a valid email address.");
// Add custom validation method to check for special characters
$.validator.addMethod("noSpecialChars", function(value, element) {
return /^[a-zA-Z\s]*$/.test(value); // Allow only letters and whitespace
}, "Please enter only letters and spaces.");
// Add custom validation method to check for starting with a letter
$.validator.addMethod("startsWithLetter", function(value, element) {
return /^[a-zA-Z]/.test(value); // Check if the value starts with a letter
}, "Please start with a letter.");
// Add custom validation method for password complexity
$.validator.addMethod("complexPassword", function(value, element) {
return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+}{":;'?/>.<,])(?=.*[^\w\d\s])/.test(value);
}, "Password must include at least one uppercase letter, one lowercase letter, one number, and special characters.");
// Initialize form validation
$("#principalForm").validate({
rules: {
email: {
required: true,
validEmail: true
},
first_name: {
required: true,
minlength: 2,
maxlength: 20,
noSpecialChars: true,
startsWithLetter: true
},
last_name: {
required: true,
minlength: 2,
maxlength: 20,
noSpecialChars: true,
startsWithLetter: true
},
password: {
required: true,
minlength: 6,
complexPassword: true
},
confirm_password: {
required: true,
equalTo: '#id_password'
}
},
messages: {
email: {
required: "Please enter your email address.",
validEmail: "Please enter a valid email address."
},
first_name: {
required: "Please enter your first name.",
minlength: "First name must be at least 2 characters.",
maxlength: "First name must not exceed 20 characters.",
noSpecialChars: "Please enter only letters and spaces.",
startsWithLetter: "First name must start with a letter."
},
last_name: {
required: "Please enter your last name.",
minlength: "Last name must be at least 2 characters.",
maxlength: "Last name must not exceed 20 characters.",
noSpecialChars: "Please enter only letters and spaces.",
startsWithLetter: "Last name must start with a letter."
},
password: {
required: "Please enter a new password.",
minlength: "Password must be at least 6 characters."
},
confirm_password: {
required: "Please confirm your new password.",
equalTo: "Passwords do not match."
}
},
errorElement: 'div',
errorPlacement: function(error, element) {
error.addClass('invalid-feedback');
$(element).closest('.form-group').append(error);
},
highlight: function(element, errorClass, validClass) {
$(element).addClass('is-invalid').removeClass('is-valid');
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass('is-invalid').addClass('is-valid');
},
submitHandler: function(form) {
// Disable the submit button to prevent multiple submissions
$('button[type="submit"]').prop('disabled', true);
}
});
});
</script>
{% endblock %}

View File

@@ -3,6 +3,7 @@
{% block stylesheet %}
<!-- include required css cdn link through html here -->
{% include "cdn_through_html/filepond_cdn_css.html" %}
{% include "cdn_through_html/flatpicker_cdn_css.html" %}
{% endblock %}
@@ -45,6 +46,7 @@
<!-- include required css cdn link through html here -->
{% include "cdn_through_html/filepond_cdn_js.html" %}
{% include "cdn_through_html/flatpicker_cdn_js.html" %}
<script>
@@ -79,6 +81,13 @@
}
$(document).ready(function() {
// Initialize datetime picker
var today = new Date().toISOString().split("T")[0];
$('#id_date_of_birth').flatpickr({
format: 'YYYY-MM-DD', // Set the date format to match your validation rule
maxDate: today
});
// Add custom validation method to check for special characters
$.validator.addMethod("noSpecialChars", function(value, element) {
return /^[a-zA-Z\s]*$/.test(value); // Allow only letters and whitespace
@@ -110,7 +119,6 @@
required: true,
date: true,
dateISO: true, // Check for ISO date format (YYYY-MM-DD)
pattern: /^\d{4}-\d{2}-\d{2}$/ // Custom pattern for YYYY-MM-DD format
},
gender: {
required: true
@@ -126,14 +134,14 @@
first_name: {
required: "Please enter your first name.",
minlength: "First name must be at least 2 characters.",
maxlength: "First name must not exceed 15 characters.",
maxlength: "First name must not exceed 20 characters.",
noSpecialChars: "Please enter only letters and spaces.",
startsWithLetter: "First name must start with a letter."
},
last_name: {
required: "Please enter your last name.",
minlength: "Last name must be at least 2 characters.",
maxlength: "First name must not exceed 15 characters.",
maxlength: "First name must not exceed 20 characters.",
noSpecialChars: "Please enter only letters and spaces.",
startsWithLetter: "Last name must start with a letter."
},
@@ -141,7 +149,6 @@
required: "Please enter your date of birth.",
date: "Please enter a valid date in the format YYYY-MM-DD.",
dateISO: "Please enter a valid date in the format YYYY-MM-DD.",
pattern: "Please enter a valid date in the format YYYY-MM-DD."
},
gender: {
required: "Please select your gender."
@@ -164,11 +171,6 @@
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass('is-invalid').addClass('is-valid');
},
submitHandler: function(form, event) {
event.preventDefault(); // Prevent default form submission on validation failure
// You can now perform additional actions before submitting the form (optional)
form.submit(); // Submit the form if validation passes (optional)
}
});
});