Semantic UI custom form validation with Ajax

Question

I am trying to implement custom form validation rules for my username field, which should check the database for duplicated or not.

After Searching on the internet, I had write out some code, and it successful getting the response "true / false" from my server. But the fields in the form doesn't update as it should. Below was my javascript code.

$.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
    }
  });

The console.log showing me the correct result as I want, but I keep getting "Username Is Exist" as show at the picture

Semantic UI form Validation result

May I know where are the place I doing it wrong ?

Answer 1

$.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
    }
  });

Answer 2

Put result in the res variable and return the res variable after the ajax call ! Work for me :

$.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

Somehow, Added Async at the ajax solve the problem.

$.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;
            }
        }
    });