как получить доступ к моему файлу coffeescript в моем файле jquery (addEventListner)?

Question

Проблема, с которой я столкнулся, находится в моем файле coffeescript. Я делаю ajax-вызов на сервер, чтобы узнать, зарегистрировано ли имя пользователя. Если на моем сервере зарегистрировано имя пользователя, оно отображает красный X, если оно не зарегистрировано, то отображается зеленая метка. Однако, если имя пользователя зарегистрировано в нашей системе и показывает красную метку, оно все же позволяет пользователю перейти к следующему разделу регистрации (только для ввода имени пользователя). ПОЖАЛУЙСТА, СМОТРИТЕ ИЗОБРАЖЕНИЕ НИЖЕ ДЛЯ ЛУЧШЕГО ОБЪЯСНЕНИЯ

введите описание изображения здесь

В моем файле JS есть логика проверки в других полях, например, если ввод пуст, он не позволит пользователю перейти к следующей части регистрации и покажет сообщение проверки. Проблема, с которой я столкнулся, заключается в том, что, хотя я рендерил ajax-вызов в моем coffeescript для ввода имени пользователя, как я могу отобразить то же сообщение об ошибке валидации (имя пользователя занято), когда пользователь пытается щелкнуть далее в форме. Вызов Ajax в одном файле, логика ошибок валидации в другом файле.

//coffeescript file

ready = ->
  $('#invalid-username').hide()
  $('#valid-username').hide()

  $('#register-username').on 'keyup', (event) ->
    $.ajax
      url: '/username_validator?username=' + $('#register-username').val()
      type: 'POST'
      dataType: 'json'
      error: (jqXHR, textStatus, errorThrown) ->
      success: (data, textStatus, jqXHR) ->
        if data.valid is true
          $('#invalid-username').hide()
          $('#valid-username').show()
          console.log('valid')
        else if data.valid is false
          $('#valid-username').hide()
          $('#invalid-username').show()
          console.log('Invalid')
    event.stopImmediatePropagation();
    return false
  return false

$(document).ready ready
$(document).on 'turbolinks:load', ready

Теперь вот мой файл javascript, в котором все сообщения проверки

function buildValidations(errorDiv, fields, errors) {
    errorDiv.empty();
    var ul = document.createElement('ul');
    errorDiv.append(ul);

    for(i=0; i<fields.length; i++) {
        fields[i].css({
          "box-shadow": "0 0 7px red"
        });
    }

    for(i=0;i<errors.length;i++) {
        errorDiv.append(errors[i]);
        if(i != errors.length - 1) {
            errorDiv.append(", ");
        }
    }
}
function validateForm(form) {
    var noErrors = true;
    // Each form must be composed of sections.
    // This just checks all the sections
    form.find(".section").each(function() {
        if( validateSection($(this)) == false) {
            noErrors = false;
        }
    });
    console.log(noErrors);
    return noErrors;
}
function validateSection(section) {
    var errorDiv = section.find(".validation-errors");
    var fields = [];
    var errors = [];

    section.find("[data-validate]").each(function() {
        // Clear error styling
        $(this).attr("style", "");

        var v = $(this).data("validate");
        var error = false;
        for(i=0;i<v.length;i++) {
            var placeholder = $(this).attr("placeholder");

            // Check empty
            if(v[i] == "empty") {
                if( validateEmpty($(this)) === false) {
                    errors.push(placeholder + " cannot be empty");
                    error = true;
                }
            }
            // Check email
            if(v[i] == "email") {
                if( validateEmail($(this)) === false) {
                    errors.push(placeholder + " is not valid");
                    error = true;
                }
            }

            // Check length
            if(v[i].includes("length")) {
                var length = v[i].split('=')[1];
                if( validateLength($(this), length) === false) {
                    errors.push(placeholder + " length must be " + length);
                    error = true;
                }
            }

            // Check if true
            if(v[i] == "checked") {
                if( validateChecked($(this)) === false) {
                    errors.push(placeholder + " must be checked");
                    error = true;
                }
            }

            // Check password
            if(v[i] == "password") {
                console.log("This ran");
                if( validatePassword($(this)) === false) {
                    errors.push("Password must be at least 8 characters with at least 1 uppercase, lowercase, number, and special character")
                    error = true;
                }
            }
            if(v[i] == "confirm-password") {
                if( validateConfirmPassword(section.find("input[type=password]")) === false) {
                    errors.push("Password fields must match")
                    error = true;
                }
            }
            if(v[i] == "all-num") {
                if( validateAllNum($(this)) === false) {
                    errors.push(placeholder + " can only contains numbers")
                    error = true;
                }
            }
        }
        // Push field to array if error
        if(error) {
            fields.push($(this));
        }
    });

    if( errors.length > 0 ) {
        buildValidations(errorDiv, fields, errors);
        errorDiv.slideDown(100);
        return false;
    } else {
        errorDiv.slideUp(100);
        return true;
    }
}
function validateChecked(field) {
    if(field.is(':checked')) {
        return true
    } else {
        return false
    }
}
function validateEmpty(field) {
    if(field.val() == "") {
        return false
    } else {
        return true
    }
}
function validateLength(field, length) {
    if(field.val().length != length) {
        return false;
    } else {
        return true;
    }
}
function validateEmail(field) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(field.val()).toLowerCase());
}
function validatePassword(field) {
    var re = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
    return re.test(String(field.val()));
}
function validateConfirmPassword(fields) {
    var p = fields.first().val();
    console.log(p);
    fields.each(function() {
        if($(this).val() != p) {
            return false;
        }
    });
    return true;
}
function validateAllNum(field) {
    var re = /^\d+$/;
    return re.test(String(field.val()));
}