Display a set of input fields to accept verification code from a user. It is common place to add email and phone number verification to websites these days.
These codes range from four to six digits. The verification code Bladewind component however, allows you to specify how many digits you want the enduser to type, by specifying the
total_digits
attribute. There is no restriction on the maximum value you can specify for the total_digits
. In a finance app, you could
use this to collect account numbers. The default number of digits displayed by the component is four (4). We interchange the words PIN, PIN code and verification code. We mean the same thing.
<x-bladewind.code />
<x-bladewind.code total_digits="5" />
What happens after the user enters their verification code? The component creates a hidden input field with the name passed to the name
attribute.
<x-bladewind.code name="pin_code" />
The above will create the input fields for the verification codes and create the hidden input below
<input type="hidden" name="pin_code" class="pin_code ..." id="pin_code" />
You can access the value of pin_code
either via Javascript or via PHP if you intend to post it in a form to your backend.
The on_verify
attribute allows you to specify a function that should be called when the user has entered a value into the last verification code field.
This should just be the function name without parentheses and parameters. If you wish to call verifyPin()
after the user enters the pin/code, just type
on_verify="verifyPin"
. The component passes the code entered by the user to your function, so, your function declaration needs to expect one parameter.
Still using the verifyPin example, your function declaration will be:
verifyPin = (code) => {
// do something here with the code
}
Let's consider a practical example. Enter any code in the fields below and get notified of the code you entered.
<x-bladewind.code
total_digits="5"
on_verify="checkPin" />
<script>
checkPin = (code) => {
alert(`You entered: ${code}`);
}
</script>
There are cases where you will want to clear the verification code input fields. Probably after a user enters a wrong code, you clear the fields so they can enter the code all over again. There is also the case where you require a pin code to be entered to authorize payments or other actions on your web app. If you have the verification code in a Modal component, the values entered may persist everytime the modal is opened.
clearPin(name)
is a helper Javascript function that easily lets you reset your verification codes.
<x-bladewind.code name="pin_code" />
<script>
checkPin = (code) => {
if( code !== '20201') {
clearPin('pin_code');
}
}
</script>
The verification code component comes with a hidden field that has the error message to display when validation fails for the code the user entered.
To make this translatable, the error message is defined on the component using the error_message
attribute.
The error message is displayed by invoking the Javascript helper function showPinError(name)
.
It accepts the name provided to the code component as a parameter. The error message can be hidden by calling the
hidePinError(name)
Javascript helper function.
The verification code below is supposed to be 2022. Enter any other code and see how the error is displayed.
<x-bladewind.code
name="pcode"
error_message="Yoh! check your code"
on_verify="checkPinCode" />
<script>
checkPinCode = (code) => {
if( code !== '2022') {
clearPin('pcode');
// accepts name of the code
// component as a parameter
showPinError('pcode');
}
}
</script>
The verification code component comes with a hidden spinner that can be made visible by invoking the showSpinner(name)
Javascript helper function.
It accepts the name provided to the code component as a parameter. The verification code spinner can be useful if your verification is done via an ajax call to an API that may take a second or two.
Showing the spinner will let the user know you are performing an action. The error message can be hidden by calling the
hideSpinner(name)
Javascript helper function.
<x-bladewind.code
name="spin_me"
on_verify="validatePin" />
<script>
validatePin = (code) => {
showSpinner('spin_me');
ajaxCall('/verify/pin', `code=${code}`, ...
}
</script>
The verification code component also comes with a hidden checkmark to show when a pin is valid. This can be invoked using the showPinSuccess(name)
Javascript helper function.
It accepts the name provided to the code component as a parameter. In the example below, the spinner shows after the code is entered and disappears to give way to the checkmark after 5 seconds.
<x-bladewind.code
name="spin_me"
on_verify="spinAndSucceed" />
<script>
spinAndSucceed = (code) => {
showSpinner('spin_me_yes');
setTimeout(()=>{
showPinSuccess('spin_me_yes');
}, 5000);
}
</script>
The table below shows a comprehensive list of all the attributes available for the Spinner component.
Option | Default | Available Values |
---|---|---|
name | pin-code-{uniqid()} | Unique name for the component. The code entered by the enduser will be available in an input field with the specified name. If for example you named your component vcode ,
the following input will be created and have the value of the full code the user entered . |
total_digits | 6 | Determines number of input boxes to be created for entry of the verification code. Any realistic number. |
on_verify | blank |
Function to call after user has finished entering the codes. When passed, this function will be triggered when the user enters a number into the last input field.
This should just be the function name without parentheses and parameters. If you wish to call verifyPin() after the user enters the pin,
just type on_verify="verifyPin" . The component passes the code to your function, so, your function declaration needs to expect one parameter.
Still using the verifyPin example, your function declaration should be verifyPin = (code) => { ... }
|
error_mesage | Verification code is invalid | Error message to display when the verification code entered is invalid |
<x-bladewind.code
name="pin-code"
total_digits="5"
on_verify="verifyPin"
has_spinner="false"
error_message="please enter the correct pin code" />
resources > views > components > bladewind > code.blade.php