JetFormBuilder can be used to restrict the input of a user such that only the information that you need from a user can be collected. For example, you may want to ensure that when a person creates their account with your form, they use a strong password with at least 8 characters, and it should also have a number, and a special character.
Or you may want to use one field to collect their first and last name, but because users will sometimes just enter one name, how do you ensure that they enter two names for sure in one field? This article intends to expose all these and more!
There are multiple ways to achieve the points discussed in this article, especially with the use of Javascript. However, I aim to explain methods that are more native to the tool I work with. I do this because it reduces the chances of a future conflict with another tool, and also gives less techincal users an opportunity to do complex things with very little effort.
Introduction – Why JetFormBuilder?
JetFormBuilder is a WordPress form plugin which is part of the Crocoblock Suite of tools and also integrates very well with the JetEngine plugin. The possibilities of forms created with JetFormBuilder is endless (literally!), and although it has a steep learning curve for more complex use cases, it is excellent for building dynamic forms – including for doing things such as restricting the kind of data a user enters into their form.
A site owner can make absolutely sure that the data entered into a form is both accurate and error-free.
Install it like you would a regular plugin from the WordPress repository by just searching “JetFormBuilder” and installing the obvious option.
How to force strong passwords
By definition, a strong password needs the following to be true:
- It should have at least 8 characters (some say at least 12.)
- It should have at least one uppercase character.
- It should have at least one lowercase character.
- It should have at least one special character or symbol.
The way to make this work in JetFormBuilder is to make use of the Validation settings of the text field in the form. After selecting the text field block, you can find it here:
Remember to set the field type as password so that the browser can hide the user’s input by default. Setting it as a password field does not automatically ensure strong passwords, though. Using a custom validation can!
Under Validation Type, you want to click on Advanced. And click on Add New.
You will now be met with this pop-up (so select Matches regular expression under Rule Type):
You want to make sure you leave Choose Field as is, since this operation does not involve any comparison with another field.
Next, we want to enter the following regular expression value into the Regular Expression field.
If you pay attention to the Regular Expression, there is a part of it (towards the end) that has the number 8. It specifies that the password should have a minimum of 8 characters. You can easily change that to 12 or any other number you prefer to be the minimum.
Also, in the Error Message field, you want to enter the message that a person will see if the password is not added according to what you specify in your regular expression. Here is what it should look like when you enter those values (be sure to hit Update to save your settings):
Next add this form to whatever page builder you use or the Block Editor. Here is how mine appears in the frontend when I enter a string of characters that don’t match the regular expression definition (it’s missing a special character):
If you want a user to enter their password twice, that’s possible. However, in the second password field, you don’t need to add this validation condition since the second password field will compare with the first for an exact match. This validation condition should only be added to the first password field.
At times, you don’t just want to control the user’s password strength, you want to add a definition of how many characters a user can add to the form. Let’s see how to do that too!
How to force a defined length of Characters and Combination
Let’s say you want a user to add a specific number of characters to a form field, so that the user can neither add more or less than the specified number of characters. You can do this in two ways.
Method 1 – Setting an input mask
The easiest way to set this up is with the use of an input mask. Input masks define character combinations, length, and type.
In the following use case shown in the video below, a user is to enter their Company Registration number. The associated companies are all defined in the system, and the user can only enter a registration number for the company he chooses. Each company registration number is identified by a unique code such as RRR-5754967 (where RRR would refer to River Rash Rhoda). To ensure that the correct number is added, an input mask is needed.
To set up the input mask, click on the field on which the mask should be applied. Then on the right hand panel of the editor, under the field accordion, toggle on Set Input Mask, and under Mask Type, set it to Default. Next, you want to enter the input mask.
In my case, I set the input mask like so aaa-9{1,3}*{1,2}
Note that the letter “a” represents any letter, the number “9” represents any number, and the character “*” represents either a letter or a number. Note that the numbers you see in the brackets signify ranges. In this use case, 9{1, 3} simply means that a user can input between one and three number (“9“) characters. Remember? 9 represents any number.
There is a little caveat here. When using input masks, not only do you restrict the number of characters entered by the user, you also by default restrict the sequence in which the characters will be entered.
And truly, this does not always work for all use cases. And the reason is that sometimes, there could be variations in the sequence. For example, what if some registration numbers in the example I gave above would also be correct if they appeared this way 67-YYYU-768?
We would be out of luck because the input mask would not work for both use cases. You would then need something more granular, something that restricts the user input, but is also able to tell when either option is correct. And that’s where Regular Expression Rules shine!
Method 2 – Setting a Regular expression rule
At the beginning of this article, we explored the use of a regular expression rule to force strong passwords by defining conditions that need to be met so that the value input would be accepted.
But what was not explored was custom use cases in which something very specific to your needs can be defined, especially if you do not know how to write regular expressions. And this is where AI can be taken advantage of. The template I share here can be adapted to suit your needs.
To explain, let’s create a use case. Assume that the company registration number to be entered should start with a string of 3 same alphabets, or can start with 2 numbers followed with either of the following alphabets D, R, and V. It’s already getting complicated. Let’s complicate it some more. The total number of characters should also not exceed 10.
Now, it’s time to write our prompt, give it to ChatGPT, and expect that it feeds us back with something correct that we can test.
You must thoroughly test whatever code you receive from any AI tool since sometimes these LLMs hallucinate and produce wrong results. Use cautiously.
The key to writing this prompt correctly is to break down all the items that make up conditions so that the AI can understand it. Here’s mine:
Hi, I want you to write a regular expression code. This RegEx code will check that the following is true before allowing the user to proceed.
1. The total number of characters entered must be 10. No more, no less.
2. (a) The first 3 characters all have to be one of the 26 alphabets and all 3 should be the same. For example "AAA" or "vvv", and so on, should work.
OR
(b) The first 2 characters have to be numbers. In this case, the 3rd character immediately following them should be either one of these 3 characters: D, R, or V.
3. Once either of the conditions above in 2a and 2b are met, the user can enter any alphanumberic character of their choice until the total number of characters get to 10.
Give me only the RegEx code as your feedback.Let’s test it out!
Here is the code ChatGPT responded with: ^([a-zA-Z])\1{2}[a-zA-Z0-9]{7}$|^\d{2}[DRV][a-zA-Z0-9]{7}$
I would use this within JetFormBuilder just like I did above when I specified the password strength with a Regular Expression. The result is that it works fine. Take a look!
This method can also be adapted to allow for entering two names in one field. You can define to ChatGPT the kind of regular expression you need. And use its output in this case.
The downside to using a regular expression for something like this is that you would have to rely much on the user knowing what he is doing – since the error message does not change depending on the condition within the regular expression. You can workaround this, however, by adding multiple regular expression conditions for various aspects of the same field to check for different things. You would just need a different regular expression for each aspect to be checked.
Also, depending on the context, you may also be able to dynamically fetch the data to check against a regular expression.
Stay dynamic!