# Add pattern rule validation to validate username field in login screen

**URL:** <https://devforum.okta.com/t/add-pattern-rule-validation-to-validate-username-field-in-login-screen/25688>\
**Category:** Questions\
**Created:** [October 31, 2023, 12:17pm UTC](https://devforum.okta.com/t/add-pattern-rule-validation-to-validate-username-field-in-login-screen/25688 "2023-10-31T12:17:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![philipnoblem](https://avatars.discourse-cdn.com/v4/letter/p/3d9bf3/32.png) [@philipnoblem](https://devforum.okta.com/u/philipnoblem)\
**Post date:** [October 31, 2023, 12:17pm UTC](https://devforum.okta.com/t/add-pattern-rule-validation-to-validate-username-field-in-login-screen/25688/1 "2023-10-31T12:17:30Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [November 27, 2023, 11:10pm UTC](https://devforum.okta.com/t/add-pattern-rule-validation-to-validate-username-field-in-login-screen/25688/2 "2023-11-27T23:10:01Z")

</div>

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

 ![Screenshot 2023-11-27 at 3.09.00 PM](https://global.discourse-cdn.com/oktadev/original/2X/7/7b3a342fcd398ce25fce8e76bb28bb7ada92af37.png)

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](https://developer.okta.com/docs/guides/custom-widget/main/).