Form Field Validation Clears Incorrectly

[vchtelmakh]

1. Make a form with several required fields.
2. Attempt to submit form.
3. Receive "field required" messages under each required field.
4. Start typing valid data into one of the required fields.

Expected: Only the error on the field being corrected is hidden. Actual: The "required" errors on ALL the required fields are cleared immediately.

JSON For the Form Above

--- ``` {"_id":"59ea074225c87f0009ad6391","machineName":"int-crds:automationTest","modified":"2017-11-06T14:13:51.914Z","title":"Automation Test","name":"automationTest","path":"automationtest","display":"form","project":"59e60fc225c87f0009ad4ba7","created":"2017-10-20T14:25:06.409Z","components":[{"clearOnHide":false,"type":"panel","title":"Automation Test Form","input":false,"key":"automationTestForm","theme":"default","tableView":false,"breadcrumb":"none","tags":[],"conditional":{"eq":"","when":null,"show":""},"properties":{},"lockKey":true,"components":[{"clearOnHide":false,"input":false,"tableView":false,"key":"columns","type":"columns","tags":[],"conditional":{"eq":"","when":null,"show":""},"properties":{},"columns":[{"components":[{"lockKey":true,"tabindex":"1","input":true,"tableView":true,"inputType":"text","inputMask":"","label":"First Name","key":"firstName","placeholder":"Enter First Name","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"customPrivate":false,"custom":"","pattern":"","maxLength":35,"minLength":"","required":true},"conditional":{"eq":"","when":null,"show":""},"type":"textfield","tags":[],"properties":{"data_field":"First_Name","data_table":"Contacts"},"hideLabel":false},{"tabindex":"3","input":true,"tableView":true,"inputType":"text","inputMask":"","label":"Last Name","key":"lastName","placeholder":"Enter Last Name","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"customPrivate":false,"custom":"","pattern":"","maxLength":35,"minLength":"","required":true},"conditional":{"eq":"","when":null,"show":""},"type":"textfield","tags":[],"properties":{"data_field":"Last_Name","data_table":"Contacts"},"lockKey":true,"hideLabel":false},{"input":true,"tableView":true,"inputType":"text","inputMask":"","label":"Nickname","key":"nickname","placeholder":"Enter Nickname","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"customPrivate":false,"custom":"","pattern":"","maxLength":35,"minLength":"","required":false},"conditional":{"eq":"","when":null,"show":""},"type":"textfield","tags":[],"properties":{"data_field":"Nickname","data_table":"Contacts"},"tabindex":"5","lockKey":true,"hideLabel":false},{"isNew":false,"inputType":"tel","input":true,"tableView":true,"inputMask":"(999) 999-9999","label":"Mobile Phone Number","key":"phoneNumber","placeholder":"Enter Mobile Phone Number","prefix":"","suffix":"","multiple":false,"protected":false,"unique":false,"persistent":true,"hidden":false,"defaultValue":"","clearOnHide":true,"validate":{"required":false},"type":"phoneNumber","tags":[],"conditional":{"eq":"","when":null,"show":""},"properties":{"data_field":"Mobile_Phone","data_table":"Contacts"},"tabindex":"7","lockKey":true,"hideLabel":false},{"input":true,"tableView":true,"inputType":"text","inputMask":"99/99/9999","label":"Birthday","key":"columnsBirthday","placeholder":"Enter Birthday","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"customPrivate":false,"custom":"","pattern":"^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\\d\\d$","maxLength":11,"minLength":"","required":true},"conditional":{"eq":"","when":null,"show":""},"type":"textfield","tags":["date"],"properties":{"data_field":"Date_of_Birth","data_table":"Contacts"},"lockKey":true,"source":"59820192cb2416000b68fed8","tabindex":"9","hideLabel":false},{"input":true,"tableView":true,"inputType":"radio","label":"Gender","key":"columnsGender","values":[{"label":"","value":""}],"defaultValue":"","protected":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"customPrivate":false,"custom":"","required":true},"type":"radio","properties":{"data_lookup_table":"Genders","data_lookup_label_field":"Gender","data_lookup_value_field":"Gender_ID","data_table":"Contacts","data_field":"Gender_ID"},"conditional":{"show":"","when":null,"eq":""},"tags":["gender"],"lockKey":true,"source":"59ba7e5bb8371d0007de3511","tabindex":"11","hideLabel":false}],"width":6,"offset":0,"push":0,"pull":0},{"components":[{"input":true,"tableView":true,"inputType":"text","inputMask":"","label":"Maiden Name","key":"maidenName","placeholder":"Enter Maiden Name","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"customPrivate":false,"custom":"","pattern":"","maxLength":35,"minLength":"","required":false},"conditional":{"eq":"","when":null,"show":""},"type":"textfield","tags":[],"properties":{"Field":"Maiden_Name","Table":"Contacts"},"tabindex":"4","lockKey":true,"hideLabel":false},{"tabindex":"2","input":true,"tableView":true,"inputType":"text","inputMask":"","label":"Middle Name","key":"middleName","placeholder":"Enter Middle Name","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"customPrivate":false,"custom":"","pattern":"","maxLength":35,"minLength":"","required":false},"conditional":{"eq":"","when":null,"show":""},"type":"textfield","tags":[],"properties":{"Field":"Middle_Name","Table":"Contacts"},"lockKey":true,"hideLabel":false},{"input":true,"tableView":true,"inputType":"email","label":"Email","key":"email","placeholder":"Enter Email Address","prefix":"","suffix":"","defaultValue":"","protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"kickbox":{"enabled":false},"type":"email","tags":[],"conditional":{"eq":"","when":null,"show":""},"properties":{"data-field":"Email","data-table":"Contacts"},"validate":{"required":true},"tabindex":"6","lockKey":true,"hideLabel":false},{"lockKey":true,"input":true,"tableView":true,"label":"Marital Status","key":"maritalStatus","placeholder":"Please select one","data":{"custom":"","resource":"","url":"","json":"","values":[{"label":"","value":""}]},"dataSrc":"values","valueProperty":"","defaultValue":"","refreshOn":"","filter":"","authenticate":false,"template":"{{ item.label }}","multiple":false,"protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"required":false},"type":"select","tags":[],"conditional":{"eq":"","when":null,"show":""},"properties":{"data_field":"Marital_Status_ID","data_table":"Contacts","data_lookup_value_field":"Marital_Status_ID","data_lookup_label_field":"Marital_Status","data_lookup_table":"Marital_Statuses"},"tabindex":"8","disabled":false,"hideLabel":false},{"input":true,"tableView":true,"label":"State","key":"state","placeholder":"Please select one","data":{"custom":"","resource":"","url":"","json":"","values":[{"label":"","value":""}]},"dataSrc":"values","valueProperty":"","defaultValue":"","refreshOn":"","filter":"","authenticate":false,"template":"{{ item.label }}","multiple":false,"protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"required":true},"type":"select","tags":[],"conditional":{"eq":"","when":null,"show":""},"properties":{"data_lookup_label_field":"State_Abbreviation","data_lookup_value_field":"State_ID","data_lookup_table":"States"},"tabindex":"10","lockKey":true,"hideLabel":false},{"input":true,"tableView":true,"label":"Congregation","key":"congregation","placeholder":"Please select one","data":{"custom":"","resource":"","url":"","json":"","values":[{"label":"1","value":"1"},{"label":"2","value":"2"},{"label":"3","value":"3"},{"label":"4","value":"4"},{"label":"5","value":"5"},{"label":"6","value":"6"},{"label":"7","value":"7"},{"label":"8","value":"8"},{"label":"9","value":"9"},{"label":"10","value":"10"},{"label":"11","value":"11"},{"label":"12","value":"12"},{"label":"13","value":"13"},{"label":"14","value":"14"},{"label":"15","value":"15"},{"label":"","value":""}]},"dataSrc":"values","valueProperty":"","defaultValue":"","refreshOn":"","filter":"","authenticate":false,"template":"{{ item.label }}","multiple":false,"protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"required":false},"type":"select","tags":[],"conditional":{"eq":"","when":null,"show":""},"properties":{"data_lookup_order_by":"Congregation_Name","data_lookup_table":"Congregations","data_lookup_filter":"Available_Online=1","data_lookup_label_field":"Congregation_Name","data_lookup_value_field":"Congregation_ID"},"tabindex":"12","lockKey":true,"hideLabel":false}],"width":6,"offset":0,"push":0,"pull":0}],"hideLabel":false},{"lockKey":true,"input":true,"label":"Submit","tableView":false,"key":"submit","size":"md","leftIcon":"","rightIcon":"","block":false,"action":"submit","disableOnInvalid":false,"theme":"primary","type":"button","tags":[],"conditional":{"eq":"","when":null,"show":""},"properties":{},"hideLabel":false}],"hideLabel":false}],"owner":null,"submissionAccess":[{"type":"create_all","roles":[]},{"type":"read_all","roles":[]},{"type":"update_all","roles":[]},{"type":"delete_all","roles":[]},{"type":"create_own","roles":[]},{"type":"read_own","roles":[]},{"type":"update_own","roles":[]},{"type":"delete_own","roles":[]},{"type":"team_read","roles":[]},{"type":"team_write","roles":[]},{"type":"team_admin","roles":[]}],"access":[{"type":"read_all","roles":["59e60fc325c87f0009ad4ba8","59e60fc325c87f0009ad4ba9","59e60fc325c87f0009ad4baa","59e60fc325c87f0009ad4bab"]}],"tags":[],"type":"form"} ``` ---

[travist]

I think this is a renderer issue. Are you using our Vanilla JS renderer @ https://github.com/formio/formio.js

[vchtelmakh]

@travist Yes, we are using the Vanilla JS renderer. I am completely guessing, but it could be a closure issue somewhere if you are looping through the fields.

[VipinJoshi]

Same is happen with us when we render the form in reactJS, we are using react-formio.

[jeriah-formio]

@vchtelmakh Thank you for the report. We have a created a ticket for the issue and will review during our planning meeting next week. Please note, we welcome pull requests in this library. If you need this item expedited, please feel free to contact support@form.io for pricing.

[Sidiro23]

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!

[vchtelmakh]

Thanks @Sidiro23 - I don't think anyone on our side has been following the issues for years now, so definitely good to close.