Improve validation framework to align with system validation rules

.changeset/silver-chairs-bathe.md

@@ -0,0 +1,5 @@
+---
+"@wso2is/identity-apps-core": patch
+---
+
+Improve username validation

identity-apps-core/react-ui-core/src/components/validation-criteria.js

@@ -64,6 +64,7 @@ export const getRuleLabel = (rule) => {
     const minLen = getConditionValue(rule, "min.length");
     const maxLen = getConditionValue(rule, "max.length");
     const confirmPassword = getConditionValue(rule, "confirm.password");
+    const isValidatorEnabled = getConditionValue(rule, "enable.validator");
 
     switch (rule.name) {
         case "LengthValidator":
@@ -106,13 +107,26 @@ export const getRuleLabel = (rule) => {
             return "Must contain special character(s).";
 
         case "ConfirmPasswordValidator":
-
             if (confirmPassword) {
                 return "Must match with the password.";
             }
 
             return null;
 
+        case "EmailFormatValidator":
+            if (isValidatorEnabled) {
+                return "Must use a valid email address.";
+            }
+
+            return null;
+
+        case "AlphanumericValidator":
+            if (isValidatorEnabled) {
+                return "Must contain only alphanumeric characters.";
+            }
+
+            return null;
+
         default:
             return null;
     }
@@ -161,6 +175,11 @@ const ValidationCriteria = ({ validationConfig, errors = [], value = "" }) => {
     );
 };
 
+PolicyValidationStatus.propTypes = {
+    isValid: PropTypes.boolean,
+    value: PropTypes.string
+};
+
 ValidationCriteria.propTypes = {
     errors: PropTypes.array,
     validationConfig: PropTypes.array,

identity-apps-core/react-ui-core/src/components/validation-error.js

@@ -33,7 +33,7 @@ const ValidationError = ({ name, errors }) => {
     const formError = errors.formStateErrors.length > 0 &&
             errors.formStateErrors.filter(error => error.label === name);
     const fieldError = formError[0] && formError[0].error ||
-        (errors.fieldErrors.length > 0 ? errors.fieldErrors[0] : null);
+        (errors.fieldErrors.length > 0 ? errors.fieldErrors[errors.fieldErrors.length - 1] : null);
 
     return (
         <>

identity-apps-core/react-ui-core/src/constants/validation-constants.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const DEFAULT_EMAIL_REGEX = "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$";
+export const DEFAULT_ALPHANUMERIC_REGEX = "^[a-zA-Z0-9]+$";

identity-apps-core/react-ui-core/src/hooks/use-field-validations.js

@@ -17,6 +17,8 @@
  */
 
 import { useCallback, useState } from "react";
+import { DEFAULT_ALPHANUMERIC_REGEX, DEFAULT_EMAIL_REGEX } from "../constants/validation-constants";
+import { validateWithRegex } from "../utils/validation-utils";
 
 /**
  * A custom hook for validating form fields using a flexible “rules” approach.
@@ -173,6 +175,22 @@ const useFieldValidation = (validationConfig) => {
                 break;
             }
 
+            case "EmailFormatValidator": {
+                if (!validateWithRegex(value, DEFAULT_EMAIL_REGEX)) {
+                    return "Must use a valid email address.";
+                }
+
+                break;
+            }
+
+            case "AlphanumericValidator": {
+                if (!validateWithRegex(value, DEFAULT_ALPHANUMERIC_REGEX)) {
+                    return "Must contain only alphanumeric characters.";
+                }
+
+                break;
+            }
+
             default:
                 return null;
         }

identity-apps-core/react-ui-core/src/utils/validation-utils.js

@@ -18,11 +18,13 @@
 
 export const isRequired = value => value !== undefined && value !== null && value.trim() !== "";
 
-export const validateEmail = (email, emailRegex) => {
-    if (!email) {
+export const validateWithRegex = (value, regex) => {
+    if (!value || !regex) {
 
         return false;
     }
 
-    return emailRegex.test(email);
+    const pattern = new RegExp(regex);
+
+    return pattern.test(value);
 };