使用Ajax进行语义UI自定义表单验证

Question

我正在尝试为我的用户名字段实施自定义表单验证规则，该规则应检查数据库是否重复。

在互联网上搜索后，我写了一些代码，并成功地从我的服务器获得“真/假”响应。但是表单中的字段并不会按照它应该更新的那样进行更新。以下是我的JavaScript代码。

$.fn.form.settings.rules.checkUsername = function(value) { 
 
     var res = true; 
 
     $.ajax({ 
 
      async : false, 
 
      url: '<?= Yii::app()->createAbsoluteUrl('home/doCheckUsername') ?>', 
 
      type : "POST", 
 
      data : { 
 
       username : value 
 
      }, 
 
      dataType: "json", 
 
      success: function(data) { 
 
       if (data.result == true) { 
 
        console.log(data.result); 
 
        return false; 
 
       } else { 
 
        console.log(data.result); 
 
        return true; 
 
       } 
 
      } 
 
     }); 
 
    }; 
 

 
$('.ui.form').form({ 
 
    username: { 
 
     identifier : 'username', 
 
     rules: [{ 
 
      type : 'checkUsername', 
 
      prompt : 'Username Already Exists' 
 
     }] 
 
    } 
 
    // some other rules 
 
    }, { 
 
    inline : true, 
 
    on  : 'blur', 
 
    onSuccess : function(){ 
 
     //post to controller 
 
    } 
 
    });

的执行console.log向我展示了正确的结果，因为我想，但我不断收到 “用户名是存在” 作为节目的画面

Semantic UI form Validation result

五月我知道我在哪里做错了？

Answer 1

不知何故，在ajax添加异步解决问题。

$.ajax({ 
     async : false, 
     url: '<?= Yii::app()->createAbsoluteUrl('home/doCheckUsername') ?>', 
     type : "POST", 
     async: false, 
     data : { 
      username : value 
     }, 
     dataType: "json", 
     success: function(data) { 
      if (data.result == true) { 
       console.log(data.result); 
       res = false; 
      } 
     } 
    }); 

Answer 2

将结果放入res变量并在ajax调用后返回res变量！我 工作：

$.fn.form.settings.rules.checkemail = function(value) { 
    var res = true; 
    $.ajax({ 
     async : false, 
     url: '../php/email_exist.php', 
     type : "POST", 
     async: false, 
     data : { 
      email : value 
     }, 
     success: function(data) { 
      console.log(data); 
      if (data == "0") { 
       console.log("OK"); 
       res = true; 
      } else { 
       console.log("KO"); 

       res = false; 
      } 
     } 
    }); 
return res; 
};  

Answer 3

$.fn.form.settings.rules.checkUsername = function(value) { 
     var res = true; 
     $.ajax({ 
      async : false, 
      url: '<?= Yii::app()->createAbsoluteUrl('home/doCheckUsername') ?>', 
      type : "POST", 
      data : { 
       username : value 
      }, 
      dataType: "json", 
      success: function(data) { 
       if (data.result == true) { 
        //console.log(data.result); 
        //return false; 
        **value = 0;** 
       } else { 
        //console.log(data.result); 
        //return true; 
        **value = 1;** 
       } 
      } 
     }); 
     **return (value == 1)? true : false;** 
    }; 

$('.ui.form').form({ 
    username: { 
     identifier : 'username', 
     rules: [{ 
      type : '**checkUsername[value]**', 
      prompt : 'Username Already Exists' 
     }] 
    } 
    // some other rules 
    }, { 
    inline : true, 
    on  : 'blur', 
    onSuccess : function(){ 
     //post to controller 
    } 
    });