I’m doing some “final” testing. When a user doesn’t fill out a “required” field, how do I get the FMBF page to scroll to that question? If there are multiple empty “required” fields, how do I do the same as mentioned above? At the moment, if there are missing required fields and the user clicks “SUBMIT”, the page just does nothing. I need it to scroll to the missing field and/or alert the user there are missing fields.
Hi!
I have an input i want to validate it would look like:
{
"inputType": "text",
"label": "My Input",
"model": "field1",
"required": true,
"styleClasses": "col-md-3",
"type": "input",
"validator": "required"
},
Validator does not run on its own it needs the action validate see docs here: validate - FM BetterForms
I have my submit button with the validate action. Then the onFailed_actions i display an alert, and scrollTo.
when you want to scroll the whole page please remove under options the container key. It will not work. For element use .error. You can right click and inspect element on your page if you want to see the class error applied when the validator fails.
{
"actions": [{
"action": "validate",
"onFailed_actions": [{
"action": "showAlert",
"options": {
"text": "Please fix the missing fields",
"title": "Missing Fields",
"type": "error"
}
}, {
"action": "scrollTo",
"options": {
"element": ".errors",
"options": {
"duration": 500,
"easing": "ease",
"offset": -100
}
}
}]
}],
"buttonClasses": "btn bg-blue-800 text-white",
"styleClasses": "col-md-12",
"text": "Validate this page",
"type": "button"
}
Ahh…I’m missing the “scrollTo” portion. I’ll add that and report back.
I have this on my button:
{
"actions": [{
"action": "validate",
"onFailed_actions": [{
"action": "showAlert",
"options": {
"text": "Please fix the missing fields",
"title": "Missing Fields",
"type": "error"
}
}, {
"action": "scrollTo",
"options": {
"element": ".error",
"options": {
"duration": 500,
"easing": "ease",
"offset": -100
}
}
}]
}
Example of my fields:
{
"disabled": false,
"featured": false,
"inputType": "text",
"label_calc": "model.lang == 'English' ? 'First Name' : model.lang == 'Español' ? 'Nombre de pila' : 'select a language'",
"model": "patient.nameFirst",
"required": true,
"styleClasses": "col-md-3 indent-8",
"type": "input",
"validator": "required",
"value": "{{model.patient.nameFirst}}"
},{
"dateTimePickerOptions": {
"format": "MM/DD/YYYY",
"icons": {
"today": "fa fa-star"
},
"showTodayButton": true
},
"featured": false,
"format": "MM/DD/YYYY",
"label_calc": "model.lang == 'English' ? 'Date of Birth' : model.lang == 'Español' ? 'Fecha de nacimiento' : 'select a language'",
"model": "patient.dateOfBirth",
"required": true,
"styleClasses": "col-md-3",
"type": "dateTimePicker",
"validator": "date",
"value": "{{model.patient.dateOfBirth}}"
}
When I click SUBMIT, the page will scroll up to the top of the page no matter where the missing “required” field is.
sorry for the typo it is "element": ".errors",