Foundation 6 Abide 自定义验证 ajax

Question

使用 Foundation 6 Abide，我创建了一个自定义验证器，它需要根据模式检查用户名字段，并让它连接到服务器以查看用户名是否已注册。当执行自定义验证器时，它首先根据正则表达式模式测试用户名 - 如果成功，它然后对服务器执行 ajax 调用以查看用户名是否存在。由于 javascript 不等待，自定义验证器函数 returns "true" 指示一切正常。 ajax 调用完成后，如果找到用户名，它会调用该字段上的 "addErrorClasses"。这完美地工作，但是我担心因为验证器之前 returned "true" 因为它不想等待 ajax，所以现在没有办法 return "false" 并且表单会认为它处于有效状态。

问题：调用 addErrorClasses 函数是否会将字段标记为无效，然后会使表单处于无效状态？

Foundation.Abide.defaults.validators.validate_username =
    function($el,required,parent) {
    // parameter 1 is jQuery selector
        if (!required) return true;

        let val = $el.val();

        // Step 1 - check that it meets the pattern
        if (!val.length)
            return true;

        let valid = new RegExp(username_pattern).test(val);
        if (!valid)
            return false;

        // Step 2 - check that the username is available
        $.ajax({
            url: "http://localhost:3000/users/"+val,
        }).done(function(data) {
            $('#demo-form').foundation('addErrorClasses',$el);
            console.log(data);
        }).fail(function() {
            // do nothing for now
        });

        return true;
};

Answer 1

是的，通过调用 addErrorClasses 会将控件标记为 'invalid'，但这取决于您调用该方法的位置和方式。

由于您正在执行 ajax（即异步），因此默认情况下 return 为真。到那时，您的控件将是 'valid'，当 ajax 收到来自 'url' 的响应时，它会根据您的代码设置 'invalid'。

当您尝试提交表单时，基础框架会重置所有控件，即它会删除所有 'data-invalid' 属性，然后执行所有默认和自定义验证器。还是你的方法 return 正确。它不会等待您的 ajax.

的响应

即使您的控件出现错误，也会提交表单。

Foundation 6 Abide 自定义验证 ajax

Foundation 6 Abide custom validation with ajax

ajax

zurb-foundation

abide