Go one step further with our solutions for creating an intuitive, personalized experience.
The Frontier api works with groups of inputs. Start with initializing the first group of inputs.
Start by creating your fields to test, then use Frontier.add({}) which will receive an object.
<input type="text" id="input_test"/>
<button class="button-submit" disabled>Submit</button>
<script>
document.addEventListener("DOMContentLoaded", function(){
Frontier.add({
"inputs" : {
"input_test": "required",
},
})
})
</script>
There are programmed formats in Frontier that will allow you to use references more easily. Enter these formats after designating the id of the field to be tested.
<script>
document.addEventListener("DOMContentLoaded", function(){
Frontier.add({
"inputs" : {
"input_test": "required"
}
})
})
</script>
It is possible to insert several formats. In this case, use "|" between each format.
<script>
document.addEventListener("DOMContentLoaded", function(){
Frontier.add({
"inputs" : {
"input_test": "string|same:word|required"
}
})
})
</script>
The key "inputs" takes into account a group of inputs, add as many as you want.
<script>
document.addEventListener("DOMContentLoaded", function(){
Frontier.add({
"inputs" : {
"input_test": "string|same:word|required"
"input_email": "email|required"
}
})
})
</script>
The buttons parameter enables or disables the "disabled" attribute of some buttons. This parameter accepts an Array of class names of targeted buttons.
In the example below, the first field is required, must contain a string, and a value identical to "word".
The second field is required, and must be an email.
<input type="text" id="input_test2"/>
<input type="text" id="input_email2"/>
<button class="button-submit2" disabled>Submit</button>
<script>
document.addEventListener("DOMContentLoaded", function() {
Frontier.add({
"inputs" : {
"input_test2": "string|same:word|required",
"input_email2": "email|required",
},
"buttons" : ["button-submit2"]
})
})
</script>
The success parameter reacts every time the formats are respected. Can be used with or without the "buttons" parameter.
<script>
document.addEventListener("DOMContentLoaded", function(){
Frontier.add({
"inputs" : {
"input_test": "string|same:word|required",
"input_email": "email|required",
},
"success" : function () {
console.log("Success!");
}
})
})
</script>
The fail parameter reacts every time the formats are not respected. Can be used with or without the "buttons" parameter.
<script>
document.addEventListener("DOMContentLoaded", function(){
Frontier.add({
"inputs" : {
"input_test": "string|same:word|required",
"input_email": "email|required",
},
"fail" : function () {
console.log("Fail!");
}
})
})
</script>
Here you will find a complete example that corresponds to the validation of two groups of inputs.
<input type="text" id="input_test"/>
<button class="button-submit" disabled>Submit</button>
<script>
document.addEventListener("DOMContentLoaded", function(){
Frontier.add({
"inputs" : {
"input_test": "required",
},
"success" : function () {
console.log("The first group of fields is valid!");
}
"fail" : function () {
console.log("The first group of fields is invalid!");
},
"buttons" : ["button-submit"]
})
})
</script>
You can use the class option to add valid or error classes in the event of validation or failure on fields.
<script>
document.addEventListener("DOMContentLoaded", function(){
Frontier.add({
"inputs" : {
"input_test": "required",
},
"buttons" : ["button-submit"]
"class" : {
"valid": "my_valid_class",
"error": "my_error_class"
}
})
})
</script>
<script>
document.addEventListener("DOMContentLoaded", function(){
Frontier.add({
"inputs" : {
"input_test": "string|same:word|required",
"input_email": "email|required",
},
"fail" : function () {
console.log("Fail!");
}
})
})
</script>
<script>
document.addEventListener("DOMContentLoaded", function(){
Frontier.add({
"inputs" : {
"input_test": "required",
},
"buttons" : ["button-submit"]
"class" : {
"valid": "my_valid_class",
"error": "my_error_class"
}
})
})
</script>
| Methods | Definition |
|---|---|
| required | The value must be entered.. |
| string | The value must be a string.. |
| alpha | The value must be a string. Accented characters are accepted.. |
| alpha_num | The value must be a string. Accented letters and numbers are accepted.. |
| alpha_dash | The value must be a string. Accented letters, numbers, dashes and underscores are accepted.. |
| The value must be in email format.. | |
| date | The value must be in date format.. |
| tel | The value must be in phone format.. |
| max:[value] | The value cannot exceed [value] : [value] is a number.. |
| min:[value] | The value cannot be below [value] : [value] is a number.. |
| equal:[value] | The value must be equal to [value] : [value] is a number.. |
| same:[value] | The value must be identical to [value] : [value] is a string.. |
| between:[min],[max] | The value must be between [min] and [max] included: [min] and [max] are numbers.. |
| same_selector_value:[value] | The value must be the same as the value of a targeted field: [value] is the name of the id or the class of the targeted field. Example: "same_selector_value:#password".. |
| regex:[value] | The value must be in [value] format: [value] is a regex. Example: "regex:/[a-z0-5]+/".. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings