feat: enhance create role form with validation and error handling

[JoshuaAkpan]

Description

**Closes #1084 **

Changes proposed

What were you told to do?

Enhance the Create Role form to show clear and immediate error messages if any input field is empty or incorrect

What did you do?

1. Updated the roleSchema to include validation for the name and description fields:

   • Added min and max length requirements
   • Added regex patterns to validate allowed characters
   • Updated error messages

2. Changed the mode option in useForm to "onChange".

3. Modified the input and textarea elements to show a red border when there's an error:

   • Added conditional classes based on the presence of errors

4. Added error message display below each input field

Check List (Check all the applicable boxes)

🚨Please review the contribution guideline for this repository.

• My code follows the code style of this project.
• This PR does not contain plagiarized content.
• The title and description of the PR is clear and explains the approach.
• I am making a pull request against the dev branch (left side).
• My commit messages styles matches our requested structure.
• My code additions will fail neither code linting checks nor unit test.
• I am only making changes to files I was requested to.

Screenshots/Videos

Error Message Display 1

Error Message Display 2

Error Message Display 3

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	14.67%	784 / 5343
🔵	Statements	14.35%	786 / 5475
🔵	Functions	14.15%	215 / 1519
🔵	Branches	9.82%	227 / 2311

File Coverage

No changed files found.

Generated in workflow #433

[billmal071]

LGTM