在 jquery blur ajax 中停止表单提交以显示错误

Question

我想要的是 -username 必须在模糊功能中进行验证，如果“用户名已经存在”，则表单不得提交。 示例 - https://accounts.google.com/SignUp?service=mail&continue=https%3A%2F%2Fmail.google.com%2Fmail&hl=en 当用户名在侧面模糊功能中退出 AJAX 时，我必须停止提交

这是我的js代码

(function ($) {
    var u_error;
    console.log('data');
    $('#username').blur(function() {
        if($("#username").val() != '') {
            $.ajax({
                url: "<?php echo base_url('welcome/un_availability') ?>",
                data: 'un=' + $("#username").val(),
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data == 1) {
                        $(".user_availability_status").css('color', 'red').text('Username already exsists');
                        //return true;
                        u_error = 1;
                    } else {
                        //return true;

                        $(".user_availability_status").css('color', 'green').text('Username Available.');
                        //$('#myform').submit();
                        u_error = 0;
                    }
                },
                error: function () {
                alert('Error while request..');
                }
            });


        }

    });             

    $('#myform').submit(function(e) {
        if(u_error == 1) {
            e.preventDefault();
        }
    });
}(jQuery));

html:

<form id="myform" method="post">
<input type="text" name="username" id="username" required>
<span class="user_availability_status"></span>
<input type="password" name="pas" required>
<input type="submit" name="r_sub" id="mysub">
</form>

Answer 1

如下更改：-

$(".user_availability_status").css('color','red').html('Username already exists');

和

$(".user_availability_status").css('color','green').html('Username Available.');

和

$('#myform').submit(function(e) {
    if($(".user_availability_status").html() == 'Username already exists') {
       e.preventDefault();
       return false;
    }
});