How to indicate that validation checks whole section of form?



  • In our app we have few views that use backend validation, that sometimes might take more that a second to response. What is more unique about it, is that validation is sent for whole section. For example, providing value for Name, will trigger a backend validation for second field Code as well.

    enter image description here

    Currently there are no indicators that the validation is happening in the background. Only error will be displayed in case of invalid data.

    So if the user provide value for Code field, before previous validation request is done, then its new value is not checked. It may result in incorrect errors, or lack of validating new value.

    Since we cannot modify the way validation works (checking more than one field at the time), at least for now, we are trying to find a good way to show user, that something is going under the hood. We were thinking about adding the same loader that we use in other parts of app, when page is still loading, but it seems bizarre and not very UX friendly, that user would be seeing it, every time when he provides data:

    enter image description here

    On the other hand, user should not be able to provide data in that short timeframe, to ensure, that the data will be properly checked. What would be a good approach?



  • So if the user provide value for Code field, before previous validation request is done, then its new value is not checked.

    I think this is where your problem lies. It seems that on the front-end, you should just keep track of whether the values in the fields have been checked or not. Changing the "Code" field should trigger another validation request, regardless if there's a validation call that is still outstanding.

    Currently there are no indicators that the validation is happening in the background.

    I'm almost always a fan of transparency. The application, as far as it is useful and practical, should do its best to let the user know what it is doing. This allows the user to retain their sense of control and reassures them that the system is doing what is desired.

    Being transparent about the status of validation requests in this case could be handled with a small indicator that shows the status and result of the calls being made. Adding a UI element that visually groups this section will help the user to recognize that modifying any field in this section will trigger revalidation.

    Form fields with status text below. One reads

    You may feel that it looks "inconsistent" with the rest of the fields that don't do live server-side validation. I'd suggest that it's perfectly okay for it to look a different way because it behaves in a different way than just validating values at submission time.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2