Trying to set up a form using Foundation has proven challenging, especially when it comes to implementing more advanced error checking. If we take the example of an input field like this:
<input pattern="username" required type="text" placeholder="username" />
Let's assume our custom username regex pattern looks something like this:
^[A-Za-z]{3,6}$
The goal here is to display different errors based on whether the input string exceeds or falls short of that character limit. However, it seems that Foundation Abide struggles with handling this particular scenario, as there are no clear instructions on how to achieve it.
Alternatively, AngularJS is also at our disposal in the same application. I could utilize the ng-min/ng-max directives to handle these validation cases and switch errors accordingly. The concern, though, is that Foundation and Angular may not integrate smoothly, potentially leading to communication issues between frameworks. While the preference is to leverage Foundation for most of the work, presenting a solid case for why Foundation may not be suitable could open up some flexibility.
Is there a way to accomplish this task solely within Foundation? Can we seamlessly combine Angular and Foundation validations, or will we encounter challenges related to Angular's $digest cycles?