Validation with Regex (force users to write according to a specific format with a custom html input)

Updated 1 week ago by Enrico

A regular expression or simply regex is a sequence of characters that define a search pattern. Usually this pattern is used for operations as "find" on strings and for input validation.

In Landbot you can use your own Javascript and the Design Advanced settings to have a custom code to validate your own inputs. In this article we will see how to validate a phone number of 9 digits with this format (123456789). Here is a demo showing how it works.

To correctly set the Regex configuration in your flow, you will need to follow the below procedure. Your final flow will be similar to this:

  1. After the Start Message, add a Send Message requesting the format that we want to use:

  1. Go ahead adding a Buttons type question, paste the code you find below after the picture but do not add any buttons.

​Code:

{html}
​<p class="inputLabel">Please type input</p><div class="inputSpace"><input class="inputArea" id="inputArea1" value="" /><button id="inputButton1"  onclick="onInput1()" class="inputButton" ><svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 535.5 535.5" style="enable-background:new 0 0 20 20;" xml:space="preserve"><g><g id="send"><polygon points="0,497.25 535.5,267.75 0,38.25 0,216.75 382.5,267.75 0,318.75"/></g></g></svg></button></div><p class="inputErrorMessage" id="errorMessageInput1"></p>{/html}

  1.  At this point, add another Send a Message block where to display (if needed) the input that has been stored in the variable @variableinput1:

  1. When we are done with the Builder, go the Advanced option of the Design section and add the following code:

CSS code (Custom Style Sheet):

.inputLabel {  margin-bottom: -10px;
}
.inputSpace {display: flex;  flex-direction: row;border: 1px none grey;  padding: 2px;  background-color: #fdf9f9;}
.inputArea{flex-grow: 2;  background-color: #fdf9f9;  border: none}
.inputButton{  border: none;  background-color: #fdf9f9;
}
.inputErrorMessage{color: red;  text-align: center;  margin-top: 1em;  font-size: 0.8em;}

JS code (Custom scripts):

<script>var regexInput1 = /^[0-9]{9}$/;
function onInput1(){        var value1 = window.document.getElementById("inputArea1").value;    if (value1.match(regexInput1)) {        window.document.getElementById("errorMessageInput1").innerHTML = ""        submitInput1(value1)    } else {        window.document.getElementById("errorMessageInput1").innerHTML = "Input format is not valid, please repeat"    }}     function submitInput1(inputValue) {    Landbot.exec('landbot-custom-data', { variableinput1: inputValue })
  Landbot.exec('landbot-msg-send', {        message:"Input Validated",        text: '***',        payload:'****',        type: 'button',    });
}</script>
  1. Double check that you have correctly copied and pasted all the codes and give it a try!
These scripts and how to's are not native functionalities. Landbot won't be able to support, help or guarantee these scripts and how to's. These Workarounds and How to's are for developers, as a learning and example material on how to extend or modify some of the platform limitations.  Due to platform updates, some scripts might stop working in the future.Please, note that in case of Scripts and Workaround the Custom Success Team can deliver limited support.


How did we do?