Foundation Abide/AngularJS 中单个输入的不同错误 [英] Different errors for a single input in Foundation Abide / AngularJS

问题描述

我正在尝试使用 Foundation 设置一个表单，但我发现除了基本的错误检查之外很难做更多的事情.假设我有以下输入字段:

假设用户名正则表达式是一个自定义模式，大致如下:

^[A-Za-z]{3,6}$

我需要做的是根据输入字段中的字符串是高于还是低于该字符限制来显示不同的错误.据我所知，Foundation Abide 在这方面有问题.我找不到任何文档表明这是可能的.

另一方面，我在同一个应用程序中可以使用 AngularJS，理论上可以使用 ng-min/ng-max 指令，并基于此切换错误情况.然而，我的理解是 Foundation 和 Angular 并不能很好地相互配合，这可能会引入一些框架之间的通信问题.业务需求表明我需要尽可能多地尝试在 Foundation 中完成这些工作，但如果我能提供一个很好的案例来说明为什么 Foundation 不适合，那么就会有回旋余地.

有没有办法完全在 Foundation 中做我需要的事情?混合 Angular 和 Foundation 验证是否容易完成，还是我会遇到 Angular 的 $digest 周期问题?

解决方案

您应该能够通过使用 Foundation 来做到这一点.Abide 允许您在 Foundation 初始化时创建自己的自定义验证函数.在该验证器中，您可以使用 DOM 操作来调整错误消息的内部文本.您的初始化将如下所示:

$(document).foundation({遵守:{验证器:{myCustomValidator: 函数 (el, required, parent) {如果(el.value.length <= 3){document.getElementById('nameError').innerText = "名称必须超过 3 个字符";返回假；} else if (el.value.length >= 9) {document.getElementById('nameError').innerText = "名称必须少于 9 个字符";返回假；}//其他规则可以到这里返回真；}}}});

然后你可以像这样在你的标签中使用这个验证器:

 
<div class="name-field"><标签>电子邮件 <small>required</small><input type="text" data-abide-validator="myCustomValidator"><small id="nameError" class="error">需要电子邮件地址.</small>

<button type="submit">提交</button></表单>

I'm trying to setup a form with Foundation and I'm finding it difficult to do more than basic error checking. Lets say I have the following input field:

<input pattern="username" required type="text" placeholder="username" />

Assuming the username regex is a custom pattern something along the lines of this:

^[A-Za-z]{3,6}$

What I need to be able to do is show different errors depending on whether the string in the input field is above or below that character limit. As far as I can tell Foundation Abide has issues with this. I can't find any documentation that even suggests this is possible.

On the other hand, I have AngularJS available within the same application, and could theoretically use the ng-min / ng-max directives, and switch error cases based off that. My understanding however is that Foundation and Angular don't exactly play nice with each other, and this may introduce some issues communicating between frameworks. Business requirements state I need to try and do as much of this in Foundation as possible, but if I can provide a good case as to why Foundation is not suitable then there would be leeway.

Is there a way to do what I need purely in Foundation? Is mixing the Angular and Foundation validations something that is easily done, or am I going to run into issues with Angular's $digest cycles?

解决方案

You should be able to do this by using Foundation. Abide allows you to create your own custom validation function when foundation is initialized. In that validator you can use DOM manipulation to adjust the inner text of your error message. Your initialization will look something like this:

$(document).foundation({
     abide: {
        validators: {
            myCustomValidator: function (el, required, parent) {
                if (el.value.length <= 3) {
                    document.getElementById('nameError').innerText = "Name must have more than 3 characters";
                    return false;
                } else if (el.value.length >= 9) {
                    document.getElementById('nameError').innerText = "Name must have less than 9 characters";
                    return false;
                } //other rules can go here
                return true;
            }
        }
    }
});

and you can then use this validator in your label like this:

 <form data-abide>
    <div class="name-field">
        <label>
            Email <small>required</small>
            <input type="text" data-abide-validator="myCustomValidator">
        </label>
        <small id="nameError" class="error">An email address is required.</small>
    </div>
    <button type="submit">Submit</button>
 </form>

这篇关于Foundation Abide/AngularJS 中单个输入的不同错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！