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

Question

使用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;
};

Answer 1

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

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

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

即使您的控制中存在错误，也会提交表单。