<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-input-underflow">A junior account cannot be 16 years old or above</span>
<span class="registration-error-message registration_hide" id="invalid-input-overflow">A junior account cannot be 16 years old or above</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
No notes defined.
/* No context defined. */
// eslint-disable-next-line import/no-cycle
import { getNode, getParentNode } from '../registrationUtility';
export const hideClass = 'registration_hide';
export const skipClass = 'registration_skip';
export function hideError(parentNode, errorSelector) {
// parentNode.parentElement.classList.remove('error');
const parentNodeOfError = getParentNode(parentNode, errorSelector);
const errorElement = getNode(parentNode, errorSelector);
parentNodeOfError.classList.add(hideClass);
errorElement.classList.add(hideClass);
}
export function hideAllError(parentNode) {
parentNode.classList.remove('error');
const errorContainer = parentNode.querySelector('.registration-error');
const errorNodes = errorContainer.querySelectorAll(
'.registration-error-message'
);
errorNodes.forEach(errorNode => {
errorNode.classList.add(hideClass);
});
errorContainer.classList.add(hideClass);
}
export function showError(parentNode, errorSelector) {
parentNode.classList.add('error');
const parentNodeOfError = getParentNode(parentNode, errorSelector);
const errorElement = getNode(parentNode, errorSelector);
parentNodeOfError.classList.remove(hideClass);
errorElement.classList.remove(hideClass);
}
.registration-error {
background-color: $red-error;
padding: 0 21px;
font-family: $registration-font;
font-size: 0;
display: inline-flex;
width: 100%;
border-radius: 0 0 2px 2px;
border: 1px solid $Embarrassment-red;
&-message {
font-size: 16px;
font-weight: 400;
line-height: 31px;
display: inline-flex;
color: white;
&::before {
content: '';
background: url(./assets/example-content/error.svg) no-repeat center;
display: inline-flex;
min-width: 13px;
height: 31px;
margin-right: 9px;
background-size: contain;
}
}
}
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-input-underflow">A junior account cannot be 16 years old or above</span>
<span class="registration-error-message registration_hide" id="invalid-input-overflow">A junior account cannot be 16 years old or above</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>