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

问题描述

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

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" />

假设用户名regex是一种自定义模式，类似于以下内容:

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

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

我需要做的是显示不同的错误，具体取决于输入字段中的字符串是高于还是低于该字符数限制.据我所知，Foundation Abide对此存在问题.我找不到任何文件甚至暗示这是可能的.

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.

另一方面，我在同一个应用程序中可以使用AngularJS，并且理论上可以使用ng-min/ng-max指令，并根据该指令切换错误情况.但是，我的理解是Foundation和Angular不能很好地相互配合，这可能会引入一些在框架之间进行通信的问题.业务需求表明，我需要在Foundation中尝试并做尽可能多的事情，但是如果我能提供一个很好的案例说明Foundation不适合的原因，那么会有回旋余地.

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.

在Foundation中，有没有一种方法可以完全满足我的需求?将Angular和Foundation验证混合起来很容易吗，还是我会遇到Angular的$ digest循环问题?

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?

推荐答案

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

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屋！