How to implement nested dialog components to validate an input field?

General Q&A
1

As an example, I have a dialog that opens when adding a new contact. It looks similar to the following:

<dialog id="newContact" title="" subtext="">
    <body>
        <text-input bind=... label=... />
    .
    .
    .
        <text-input bind='number' label=... />
    </body>
</dialog>


<button-group>
        <button label="Cancel" on-press="$:Cancel()" validate="false" />
        <button label="Save" on-press="$:Submit()" validate="true"/>
 </button-group>

I want to verify that the user enters a phone number of 10 digits. I tried using another dialog to route to the check and notify if the user has entered a number less than 10 digits. See below:

<dialog id="newContact" title="" subtext="">
    <body>
        <text-input bind=... label=... />
    .
    .
    .
        <dialog id="checkNumber" .... /> <-- NEW DIALOG
        <text-input bind='number' label=... />
    </body>
</dialog>


<button-group>
        <button label="Cancel" on-press="$:Cancel()" validate="false" />
        <button label="Save" on-press="$:Submit()" validate="true"/>
 </button-group>

I tried adding a check into my on-press on the Save button and calling the checkNumber dialog. The dialog pops up but then closes the newContact dialog before the user can even press anything. Even if I call the newContact dialog again. I would like to make the dialog work, however, if it cannot, what's the best way to check the length of a text-input?

Right now I'm implementing return notification.error(....), but I'd rather have another dialog because the notification cancels out the newContact dialog and the user has to add a new contact again.

2

I don't know how to do a second dialog without closing the first one. I would put an info section above the text input displaying a text view variable that is empty. Add an onChange script that checks the phone number and then update the Info variable with the validation message, "Expected 10 digits in the phone number!" or whatever message you want to give them.

You could also set the Info tag show-if to the variable so that it hides the Info section unless there is text in the variable.
XML:

<var name="validationMsg" type="text" />

    <dialog id="newContact" title="" subtext="">
        <body>
            <text-input bind="name" label="Contact" />
            <info show-if="validationMsg">{validationMsg}</info> 
            <text-input bind="phone" label="Phone" on-change="$:validPhone()"/>
        </body>
    </dialog>

Javascript:

function validPhone(){
    var phone = view.phone.replace(/[^\d]/g,'');
    if(/^\d{10}$/.test(phone))
        view.validationMsg = ""; 
    else
        view.validationMsg = "Invalid phone number!";
}