I want to ensure that the format of inputted data for a Canadian postal code and telephone number are correct, and a field that prompts for a number only allows whole numbers (no decimal point) and no more than three digits.
Considering that one of the prime functions of Toolset is to create user-entered forms and getting that form data as accurate and properly formatted as possible is always a necessity, I am gobsmacked at the lack of inbuilt control I might have over such fields. Doing a search in your tech support docs, I have found this informative post - https://toolset.com/forums/topic/format-data-input-like-social-security-number-of-phone-number-hyphens/ - with the stated solution to "easily achieve [this] by adding some jQuery custom code."
I purposefully purchased Toolset because, on numerous occasions in the promotional material, it indicates that I would be able to use all of the functionality of the product without the need for coding. I am not a coder and I never will be. I might be termed a power user who can most certainly look at some simple custom code and alter it to my needs. But I'll never be able to create any code "from scratch!"
A search of your tech support docs using the term "using jquery" gets me dozens of other Toolset users, unable to get their jquery to work properly - but no instructions of how I would implement such a thing, even if I was to have the code to do this! And just to ensure that an entered phone number matches a required format!
The application I am creating is quite complex and I have a pattern to follow already in a previous attempt to implement it using ACF and a host of form, facet, filter, and other plugins and I am beginning to wonder just how far over my head Toolset might be!
Hi,
Thank you for contacting us and I'd be happy to assist.
Your observation is correct and the Toolset Form fields do not offer any built-in validation rules, to match a certain format or length.
For this, you'll need to include some custom script in the Form's "JS editor" tab ( screenshot: hidden link ) and I'll be happy to share some examples.
Suppose you have these 3 fields:
1. A single line type field Postal Code with slug "postal-code", that should accept only values in "A1A 1A1" format.
2. A number type field Phone Number with slug "phone-number", that should accept exactly 11 digits without any spaces or special characters.
3. A number type field Number Field with slug "number-field", that should accept a maximum of 3 digits.
The validation script for these 3 fields will look like this:
jQuery(document).ready(function($){
$("input[name=wpcf-postal-code]").attr("pattern", "[a-zA-Z][0-9][a-zA-Z](-| |)[0-9][a-zA-Z][0-9]");
$("input[name=wpcf-postal-code]").attr("title", "Accepted Format: A1A 1A1");
$("input[name=wpcf-phone-number]").attr("maxlength", "11");
$("input[name=wpcf-phone-number]").attr("minlength", "11");
$("input[name=wpcf-phone-number]").attr("title", "Accepted Format: 11 digits without any spaces or special characters");
$("input[name=wpcf-number-field]").attr("maxlength", "3");
$("input[name=wpcf-number-field]").attr("title", "Accepted Format: Maximum 3 digits");
});
Note: Please replace the fields slugs with actual ones used on your website.
I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/
regards,
Waqar
