Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Need phone number box to disappear after phone number is entered correctly

Avatar

Level 6

I posted this question before and thought it was answered but it was not.  My form has a requirement that a phone number be entered.  I have a warning embedded if they enter less than 10 digits and it focuses on the error.  In the exit event of the text field, I have the following:   

if (this.rawValue.length > 0 && this.rawValue.length <10) {

 xfa.host.setFocus(this.somExpresion);

}

The problems are:

1. If 10 characters are entered. i.e., brackets, it will be accepted.  Example: (123)4567 will be accepted.  I would like it to accept only digits like1234567890 and focus until it's entered correctly.  

2.  The text box doesn't disappear after the information is entered correctly.  As soon as the digits are entered, I would like the text box to disappear.

Your help is appreciated.

 

6 Replies

Avatar

Level 10

To restrict the characters a user can enter, use a script in the change event of the field. It will check the entere character against a regular expression. It it doesn't match, the character is deleted.

if (!xfa.event.change.match(/\d/gi)) {
    xfa.event.change = "";
}

 

In the exit event you then can use another script with an regular expression to validate the input and hide the field, if it's correct.

if (!this.isNull) {
    // Check if value is of 10 digits
    if (this.rawValue.match(/^\d{10}$/g)) {
        this.presence = "invisible"
    }
}

 

Avatar

Level 6
Looks like I posted my questions to you in the wrong place. I still need more assistance. I entered the scripts above and it works by not allowing the user to enter any non digits. The problems I have is:

Avatar

Level 6
The problems I have are: (1) - I need the phone number to be entered into a floating field in my form (after it's entered correctly) and (2) I need the button, used to enter the phone number into the form, to be hidden after the phone number is entered correctly. Your help is greatly appreciated.

Avatar

Level 6
Correction...The problems I have are: (1) - I need the phone number that is entered in the text field to be entered into a floating field in my form (after it's entered correctly) by using a button on my form. and (2) I need that button, and the text field, to be hidden after the phone number is entered correctly. I hope I explained that clearly. Your help is greatly appreciated.

Avatar

Level 6

Thank you.  Questions.

1.  Do I keep the script that is already in the exit event, i.e.  if(this.rawValue.length > 0 && this.rawValue.length < 10)..... or do I delete this?

2.  Do I enter the other scripts as listed or just what is entered to check the form?

3.  Forgot to mention that I have a button that will enter the information in the text field into the body of the form when clicked.  I want that button and text field to disappear when the phone number is entered correctly.  How should I enter the script(s) for that?