async=false 基础遵守的解决方法

Question

我想摆脱 async=false 但我似乎找不到合适的解决方法

$(document).foundation({
  abide : {
    validators: {
      checkUser: function(el, required, parent) {
        var result = $.ajax({ 
          type: "GET", 
          url: "../functions/checkUsername.php",
          data:{
            'username': el.value
          }, 
          async: false 
        }).responseText;
        return eval(result);
      }
    }
  }
});

仅供参考：checkUsername.php returns 对或错

我尝试了几种不同的方法，但似乎找不到修改此功能的最佳方法。

Answer 1

这就是我最终想出的，最终对我有用。第一部分是一个函数，用于在检查失败时将字段标记为无效。第二个允许您通过 php 或任何您正在使用的方式检查您的数据库。

第一个函数还允许您发送一个字符串，这样您就可以更改错误框中设置的消息，以防您设置了格式，而不是显示涵盖所有情况的大消息。

我的 php 脚本 returns 1 或 0。1 表示用户名可用 0 如果不可用。

$(function(){   
    // Mark Invalid for Username Checks
    $.fn.markInvalid = function(text) {
        $(this).filter(":input").each(function(i, el) {
            console.log($(this).val());
            var input = $(el);
            var container = input.closest(".row");    
            var label = container.find("label");    
            var error = container.find(".form-error");
            label.addClass("is-invalid-label");
            input.attr("data-invalid", "").addClass('is-invalid-input');
            if(text){ error.text(text).addClass('is-visible'); }
        });
    };

    $("#usrnme").on("valid.zf.abide", function(e){
        $.post( "checkUsername.php", {'username': $('#usrnme').val()}, function( data ) {
            if(data!=1){ $(e.target).markInvalid('The username you entered is already taken.'); }
            else{ $('#changeUSR').html('The username must only contain lowercase letters or numbers.'); }
        });
    });
});

HTML代码

<div>
    <label class="label">Username</label>
    <input type="text" name="username" id="username" >
    <span id="changeUSR" class="form-error">The username must only contain lowercase letters or numbers.</span>
</div>

async=false 基础遵守的解决方法

async=false workaround for foundation abide

ajax

jquery

zurb-foundation