Foundation 6 使用 ajax 进行自定义验证答案

【问题标题】：Foundation 6 Abide custom validation with ajaxFoundation 6 使用 ajax 进行自定义验证
【发布时间】：2017-05-16 20:53:04
【问题描述】：

使用 Foundation 6 Abide，我创建了一个自定义验证器，该验证器需要根据模式检查用户名字段，并让它与服务器联系以查看用户名是否已注册。执行自定义验证器时，它首先根据正则表达式模式测试用户名 - 如果成功，则对服务器执行 ajax 调用以查看用户名是否存在。由于 javascript 不等待，自定义验证器函数返回“true”，表示一切正常。当 ajax 调用完成时，如果找到用户名，它会调用字段上的“addErrorClasses”。这非常有效，但是我担心由于验证器之前返回“true”，因为它不想等待 ajax，所以现在无法返回“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;
};

【问题讨论】：

标签： ajax zurb-foundation abide

【解决方案1】：

是的，调用 addErrorClasses 会将该控件标记为“无效”，但这取决于您调用该方法的位置和方式。

由于您正在执行 ajax（即异步），它默认返回 true。到那时，您的控件将是“有效的”，当 ajax 收到来自“url”的响应时，它会根据您的代码设置“无效”。

当您尝试提交表单时，基础框架会重置所有控件，即它会删除所有“数据无效”属性，然后执行所有默认和自定义验证器。您的方法仍然返回 true。它不会等待来自您的 ajax 的响应。

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

【讨论】：