Add pattern rule validation to validate username field in login screen

we are trying to add validations on the front end to the username field in login screen to ensure the user isn’t entering in an incorrect format, as it must be an email address format.

We have tried adding pattern “[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$” to username field in the browser developer elements and its working as expected in browser

Is there a way that i can add this in okta sign in widget code(Okta hosted)

There is an option in Profile Editor to set a format restriction on the Username field, so that it must be in Email format:

If for some reason thats not an option for your org AND you have a custom domain configured for your Okta tenant, you could look to add this type of validation to the customized Okta hosted widget.