Skip to content

Add stricter client-side mobile number validation in self-registration #10125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sithumli wants to merge 3 commits into
base: master
Choose a base branch
from
+25 −11
Open

Add stricter client-side mobile number validation in self-registration #10125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f0e2d59
Add stricter client-side mobile number validation in self-registratio…
Sithumli Apr 12, 2026
f345bba
Add Changeset
Sithumli Apr 12, 2026
fdb7716
Enhance client-side validation for self-registration forms by removin…
Sithumli Apr 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/bright-turtles-sell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@wso2is/identity-apps-core": patch
---

Add stricter client-side mobile number validation in self-registration using E.164 format
31 changes: 20 additions & 11 deletions ...ity-apps-core/apps/recovery-portal/src/main/webapp/self-registration-username-request.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -810,6 +810,8 @@
data-testid="self-register-page-username-input"
autocomplete="off"
required
onblur="showAlphanumericUsernameValidationStatus()"
oninput="hideAlphanumericUsernameValidationStatus()"
/>
<i aria-hidden="true" class="user outline icon"></i>
</div>
Expand Down Expand Up @@ -852,6 +854,8 @@
data-testid="self-register-page-username-input"
autocomplete="off"
<%if (emailPII.getRequired() || !isAlphanumericUsernameEnabled || isSelfRegistrationLockOnCreationEnabled) {%> required <%}%>
onblur="showUsernameValidationStatus()"
oninput="hideUsernameValidationStatus()"
/>
<i aria-hidden="true" class="envelope outline icon"></i>
</div>
Expand Down Expand Up @@ -1095,7 +1099,7 @@
String claimErrorMsg = claimName + "_error";
String claimErrorMsgText = claimName + "_error_text";
%>
<div id= "<%=IdentityManagementEndpointUtil.i18nBase64(recoveryResourceBundle, claimFieldID)%>"
<div id="<% if (StringUtils.equals(claim.getUri(), IdentityManagementEndpointConstants.ClaimURIs.MOBILE_CLAIM)) { %>mobile_field<% } else { %><%=IdentityManagementEndpointUtil.i18nBase64(recoveryResourceBundle, claimFieldID)%><% } %>"
<% if (claim.getRequired()) { %> class="field form-group required" <%} else {%> class="field"<%}%> >
<label class="control-label">
<%=IdentityManagementEndpointUtil.i18nBase64(recoveryResourceBundle, claim.getDisplayName())%>
Expand Down Expand Up @@ -1174,29 +1178,32 @@
<% } else { %>
<input type="text" name="<%= Encode.forHtmlAttribute(claimURI) %>"
class="form-control"
onblur="showFieldValidationStatus(this)"
oninput="hideFieldValidationStatus(this)"
<% if (claim.getValidationRegex() != null) { %>
<% if (StringUtils.equals(claim.getUri(), IdentityManagementEndpointConstants.ClaimURIs.MOBILE_CLAIM)) { %>
onblur="showMobileNumberValidationStatus()"
oninput="hideMobileNumberValidationStatus()"
id="mobileNumber"
<% } else { %>
onblur="showFieldValidationStatus(this)"
oninput="hideFieldValidationStatus(this)"
<% } %>
<% if (claim.getValidationRegex() != null && !StringUtils.equals(claim.getUri(), IdentityManagementEndpointConstants.ClaimURIs.MOBILE_CLAIM)) { %>
pattern="<%= Encode.forHtmlContent(claim.getValidationRegex()) %>"
<% } %>
<% if (claim.getRequired()) { %>
required
<% } %>
<% if (StringUtils.equals(claim.getUri(), "http://wso2.org/claims/mobile")) { %>
id="mobileNumber"
<% }%>
placeholder="<%=IdentityManagementEndpointUtil.i18n(recoveryResourceBundle, "enter")%> <%=IdentityManagementEndpointUtil.i18nBase64(recoveryResourceBundle, claim.getDisplayName())%>"
<% if(skipSignUpEnableCheck && StringUtils.isNotEmpty(claimValue)) {%>
value="<%= Encode.forHtmlAttribute(claimValue)%>" disabled<%}%>
/>
<% } %>
<div class="mt-1" id="<%=IdentityManagementEndpointUtil.i18nBase64(recoveryResourceBundle, claimErrorMsg)%>" hidden="hidden">
<div class="mt-1" id="<% if (StringUtils.equals(claim.getUri(), IdentityManagementEndpointConstants.ClaimURIs.MOBILE_CLAIM)) { %>mobile_error<% } else { %><%=IdentityManagementEndpointUtil.i18nBase64(recoveryResourceBundle, claimErrorMsg)%><% } %>" hidden="hidden">
<div class="ui grid">
<div class="one wide column">
<i class="red exclamation circle icon"></i>
</div>
<div class="fourteen wide column validation-error-message"
id="<%=IdentityManagementEndpointUtil.i18nBase64(recoveryResourceBundle, claimErrorMsgText)%>"></div>
id="<% if (StringUtils.equals(claim.getUri(), IdentityManagementEndpointConstants.ClaimURIs.MOBILE_CLAIM)) { %>mobile_error_text<% } else { %><%=IdentityManagementEndpointUtil.i18nBase64(recoveryResourceBundle, claimErrorMsgText)%><% } %>"></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -3165,8 +3172,10 @@
var mobile_field = $("#mobile_field");

if (mobileNumber != null && mobileNumber.value != null && mobileNumber.value.trim() !== ""){
var mobilePattern = /^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})?[-. )]*(\d{3})?[-. ]*(\d{4,6})(?: *x(\d+))?\s*$/;
if (!mobilePattern.test(mobileNumber.value)) {
// E.164 format: + followed by 10-15 digits.
var mobilePattern = /^\+[1-9]\d{9,14}$/;
var trimmedMobileNumber = mobileNumber.value.trim();
if (!mobilePattern.test(trimmedMobileNumber)) {
mobile_error_msg_text.text("<%=IdentityManagementEndpointUtil.i18n(recoveryResourceBundle, "mobile.number.format.error")%>")
Comment thread
Sithumli marked this conversation as resolved.
mobile_error_msg.show();
mobile_field.addClass("error");
Expand Down