Untitled

<script>
    $(document).ready(function() {
        // Custom validation method for Singapore phone numbers
        $.validator.addMethod("sgPhone", function(value, element) {
            return this.optional(element) || /^(\+65)?[89]\d{7}$/.test(value);
        }, "Please enter a valid Singapore phone number.");

        // Custom validation method for last 4 NRIC
        $.validator.addMethod("last4NRIC", function(value, element) {
            var exp = /^\d{3}[A-Z]$/;
            return exp.test(value.toUpperCase());
        }, "This is an invalid last 4 NRIC.");

        // Password validation methods
        $.validator.addMethod("passLength", function(value, element) {
            return this.optional(element) || /^.{8,30}$/.test(value);
        });
        $.validator.addMethod("passUpper", function(value, element) {
            return this.optional(element) || /[A-Z]+/.test(value);
        });
        $.validator.addMethod("passLower", function(value, element) {
            return this.optional(element) || /[a-z]+/.test(value);
        });
        $.validator.addMethod("passNumber", function(value, element) {
            return this.optional(element) || /[0-9]+/.test(value);
        });
        $.validator.addMethod("passSymbol", function(value, element) {
            return this.optional(element) || /[!@#$%^&()'\[\]"?+-\/*={}.,;:_]+/.test(value);
        });

        // Validation rules and messages
        $('#editProfile').validate({
            rules: {
                name: {
                    required: true, // Add required rule
                    maxlength: 255,
                },
                preferred_name: {
                    maxlength: 255,
                },
                phone: {
                    required: true, // Add required rule
                    sgPhone: true,
                },
                last4nric: {
                    required: true, // Add required rule
                    last4NRIC: true,
                },
                cgroup1: {
                    maxlength: 255,
                },
                aname1: {
                    maxlength: 255,
                },
                cgroup2: {
                    maxlength: 255,
                },
                aname2: {
                    maxlength: 255,
                },
                'password': {
                    required: true, // Add required rule
                    passLength: true,
                    passUpper: true,
                    passLower: true,
                    passNumber: true,
                    passSymbol: true,
                },
                'password_confirmation': {
                    required: true, // Add required rule
                    equalTo: '#password',
                },
            },
            messages: {
                name: {
                    required: "This field is required.", // Add a custom message
                },
                phone: {
                    required: "This field is required.", // Add a custom message
                },
                last4nric: {
                    required: "This field is required.", // Add a custom message
                },
                'password': {
                    required: "This field is required.", // Add a custom message
                    passLength: 'Password length must be between 8 and 30 characters.',
                    passUpper: 'Password must contain at least one uppercase.',
                    passLower: 'Password must contain at least one lowercase.',
                    passNumber: 'Password must contain at least one number.',
                    passSymbol: 'Password must contain at least one symbol.'
                },
                'password_confirmation': {
                    required: "This field is required.", // Add a custom message
                    equalTo: "Passwords do not match."
                }
            },
            errorPlacement: (error, element) => {
                error.appendTo(`#${element.attr("name")}-error`);
            },
            onkeyup: function(element) {
                $(element).valid(); // Trigger validation on keyup
            },
            onfocusout: function(element) {
                $(element).valid(); // Trigger validation on focusout
            }
        });
    });
</script>