Input type Telephone

[yvesf]

Hello,


I would like to use Input Type Telephone. Could you please to point me to the right direction (documentation) or example of use.

Telephone.png

Idem for Email, Url and others. I am selecting them but no effect, it works like a text field.

Many thx

Yves

[kev1n]

E.g. for Type "Telephone", define attributes like

Code: Select all

pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}",placeholder="Format: 123-456-7890"

attributes.png

Next, add a validation in the form's Custom Code:

Code: Select all

function nuBeforeSave() {
    const myPhone = document.getElementById('my_phone');   // !! replace my_phone with your object id !!
    if (myPhone.validity.patternMismatch) {
        nuMessage('Please enter a valid phone number.');
        // Cancel saving         
        return false;
    }

    // Continue Saving
    return true;

}

[yvesf]

Hello Kev1n,

It works perfectly with Telephone following your step by step method.
Trying with the same approach for Type = "Email" taking the same approach ie, define attributes like

Code: Select all

pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$",placeholder="Format: mon.compte@mondomain.com"

Putting that on Attributes like you did for Telephone type and add a validation in the nuBeforeSave function on the form's Custom Code.

Code: Select all

function nuBeforeSave() {
    const myEmail = document.getElementById('my_email');  
    if (myEmail.validity.patternMismatch) {
        nuMessage('Please enter a valid email.');
        // Cancel saving         
        return false;
    }

    // Continue Saving
    return true;
    }
    

It sounds that the regular expression is misinterpreted by nubuilder. Any help appreciated as the fields after email aren't rendered..

Yves

[kev1n]

Try the email pattern from this site:

https://www.w3schools.com/tags/att_input_pattern.asp

[Giu]

Try the email pattern from this site:

https://www.w3schools.com/tags/att_input_pattern.asp

How exactly pattern works? If I wrote the pattern you pointed for email in attributes of my input like this...

Code: Select all

pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$"

I got this error in console and form don't loads

Code: Select all

Uncaught DOMException: String contains an invalid character

[kev1n]

This looks like a parser error. Add the pattern via JavaScript, in the form's custom code:

Code: Select all

$('#your_object_id_here').attr('pattern', '[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$');

[Giu]

Yep, this way add the pattern attribute without issues. Thanks

[kev1n]

PS: This has been fixed on Github, so you can set the attribute without JavaScript.

[Giu]

Thanks