122 lines
5.1 KiB
HTML
122 lines
5.1 KiB
HTML
{% extends 'base_structure/layout/base_template.html' %}
|
|
{% load static %}
|
|
{% block stylesheet %}
|
|
<!-- include required css cdn link through html here -->
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="row layout-top-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="row mb-2">
|
|
<div class="col">
|
|
<a href="{% url 'module_auth:users'%}" style="height: fit-content;width: fit-content;display: inline-block;">
|
|
<h3 class="card-title m-2 d-flex align-items-center gap-2" style="width: fit-content;"><span class="fw-bold material-symbols-outlined">
|
|
arrow_back
|
|
</span><span>{{operation}} User</span></h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row layout-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="statbox widget box box-shadow">
|
|
<div class="widget-content widget-content-area">
|
|
|
|
<form method="post" id="userForm">
|
|
{% csrf_token %}
|
|
{% include 'base_structure/includes/dynamic_template_form.html' with form=form %}
|
|
<div class="mt-4 mb-0">
|
|
<div class="d-grid"><button class="btn btn-primary btn-block" type="submit">Submit</button></div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
<!-- include required js cdn link through html here -->
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
// 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
|
|
$("#userForm").validate({
|
|
rules: {
|
|
first_name: {
|
|
required: true,
|
|
maxlength: 50, // Example: Set maximum length for first_name to 50 characters
|
|
startsWithLetter: true,
|
|
noSpecialChars: true,
|
|
},
|
|
email: {
|
|
required: true,
|
|
email: true // Check for valid email format
|
|
},
|
|
password: {
|
|
required: true,
|
|
complexPassword: true
|
|
},
|
|
confirm_password: {
|
|
required: true,
|
|
equalTo: "#id_password" // Ensure confirm_password matches password field
|
|
}
|
|
},
|
|
messages: {
|
|
first_name: {
|
|
required: "Please enter your name.",
|
|
maxlength: "Name must not exceed 50 characters.",
|
|
startsWithLetter: "First name must start with a letter.",
|
|
noSpecialChars: "Please enter only letters and spaces.",
|
|
},
|
|
email: {
|
|
required: "Please enter your email address.",
|
|
email: "Please enter a valid email address."
|
|
},
|
|
password: {
|
|
required: "Please enter your password.",
|
|
},
|
|
confirm_password: {
|
|
required: "Please confirm your 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');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |