Page 1 of 1
Input type Telephone
Posted: Tue Nov 07, 2023 11:36 pm
by 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
Re: Input type Telephone
Posted: Wed Nov 08, 2023 12:52 pm
by 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;
}
Re: Input type Telephone
Posted: Sun Dec 31, 2023 2:40 pm
by 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
Re: Input type Telephone
Posted: Sun Dec 31, 2023 3:04 pm
by kev1n
Re: Input type Telephone
Posted: Sat May 18, 2024 9:09 am
by Giu
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
Re: Input type Telephone
Posted: Sat May 18, 2024 9:23 am
by 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,}$');
Re: Input type Telephone
Posted: Sat May 18, 2024 10:14 pm
by Giu
Yep, this way add the pattern attribute without issues. Thanks
Re: Input type Telephone
Posted: Tue May 21, 2024 10:49 am
by kev1n
PS: This has been fixed on Github, so you can set the attribute without JavaScript.
Re: Input type Telephone
Posted: Tue May 21, 2024 2:00 pm
by Giu
Thanks