digest_app/templates/module_iam/iam_principal_resource_permission_edit.html

{% extends 'base_structure/layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
    <!-- include required css cdn link through html here -->

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
{% 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_iam:principal_group_link'%}" 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}} Principal Group Link</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" autocomplete="off" id="principalForm">
                            {% 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 src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2({
                placeholder: 'Select options',
                allowClear: true,
                tags: true, // Allow the user to enter custom tags
                tokenSeparators: [',', ' '], // Customize token separators
                closeOnSelect: false // Keep the dropdown open after selection
            });

            
        // 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.");

        // 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
                }
            },
            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."
                }
            },
            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 %}