Динамически изменять всплывающую подсказку пользовательского класса - PullRequest
Новая
       10

Динамически изменять всплывающую подсказку пользовательского класса

0 голосов
/ 27 февраля 2019

Я хочу динамически изменять data-custom-class в зависимости от предоставленных пользователем данных в определенном поле ввода (т. Е. Если пользователь не предоставляет хотя бы 1 символ для «username», всплывающая подсказка должна быть красной с некоторым текстом, если пользователь предоставляетдействительное имя пользователя, всплывающая подсказка должна быть зеленой с другим текстом).

Проблема в том, что текст на самом деле изменяется, а класс - нет (он сохраняет первый класс, установленный JQuery.

Я уже пробовал attr () и tooltip (параметры) - (то есть «data-customClass» через attr () или customClass через tooltip ()). Как вы можете видеть, я даже пытаюсь принудительно удалить подсказку итакже удалите атрибут перед тем, как установить его снова, но, похоже, ничего из этого не работает.

Подсказка создает новый "div" и, даже если он изменяет атрибут "text", атрибут "custom-class" делаетне.

ПРИМЕЧАНИЕ : я использую Bootstrap 4 + Popper.js + расширение Bootstrap Custom Class (Js + CSS). расширение файла ссылка здесь

Буду признателен, если выУ вас есть какие-либо советы по этому поводу!

Tks заранее.

ОРИГИНАЛЬНЫЙ HTML: 

<form action="/register" method="post">
    <div class="form-group row flex-v-center">
        <div class="col-xs-3 col-sm-2 text-left">
            <label for="username"> Username: </label>
        </div>
        <div class="col-xs-5 text-left">
            <input name="username" id="username" type="text" class="form-control-sm" data-custom-class="tooltip-danger" data-togle="tooltip">
                <small id="usrndHelpBlock" class="d-block form-text text-muted">
                        Username must be at least 1 character long and must not be already registered.
                    </small>
        </div>
    </div>
    <div class="form-group row flex-v-center">
            <div class="col-xs-3 col-sm-2 text-left">
                <label for="pwd">Password: </label>
            </div>
            <div class="col-xs-5 text-left">
                <input name="password" id="pwd" type="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" class="form-control-sm" data-toggle="tooltip" data-placement="aright" data-custom-class="tooltip-primary" title="">
                    <small id="passwordHelpBlock" class="d-block form-text text-muted">
                        Password must be at least 8 characters long , contain letters and numbers, and must not contain spaces, special characters, or emoji.
                    </small>
            </div>
    </div>
    <div class="form-group row flex-v-center">
        <div class="col-xs-3 col-sm-2 text-left">
            <label for="conf">Confirmation: </label>
        </div>
        <div class="col-xs-5 text-left">
            <input name="confirmation" id="conf" type="text" class="form-control-sm" data-toggle="tooltip" data-placement="auto" data-custom-class="tooltip-primary" title="Confirmation doesn't match password!">
                <small id="confHelpBlock" class="form-text text-muted">
                    Confirmation must match password.
                </small>
        </div>
    </div>
    <div class="form-group row flex-v-center">
        <div class="col-xs-8">
            <button id="b_register" class="btn btn-primary">Register Now !</button>
        </div>
    </div>
</form>

SCRIPT 

<script type="text/javascript">
    $('#username').focusout(function() {
        if ($('#username').val() == "") {
            $('#username').tooltip('dispose');
            $('#username').attr("title","User must be at least 1 character long!");
            $('#username').tooltip('toggle');
            $('#username').focus();
        } else {
            $('#username').tooltip('dispose');
            $('#username').removeAttr("data-custom-class");
            $('#username').attr("data-custom-class", "tooltip-success");
            $('#username').attr("title","Username avaiable!");
            $('#username').tooltip('dispose');
            $('#username').tooltip('toggle');
        }
    });
</script>

1 Ответ

0 голосов
/ 27 февраля 2019

Чтобы изменить атрибут данных , вам необходимо изменить: 

$('#username').removeAttr("data-custom-class");
$('#username').attr("data-custom-class", "tooltip-success");

с помощью: 

$('#username').data("customClass", "tooltip-success");

И снова установить на опасность в первом случае, есличасть.

Фрагмент: 

$('#username').tooltip();
$('#username').on('focusout', function() {
    if ($('#username').val() == "") {
        $('#username').tooltip('dispose');
        $('#username').attr("title","User must be at least 1 character long!");
        $('#username').data("customClass", "tooltip-danger");
        $('#username').tooltip('toggle');
        $('#username').focus();
    } else {
        $('#username').tooltip('dispose');
        $('#username').data("customClass", "tooltip-success");
        $('#username').attr("title","Username avaiable!");
        $('#username').tooltip('dispose');
        $('#username').tooltip('toggle');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Custom-Classes-Bootstrap-Tooltips/bootstrap-tooltip-custom-class.css">
<script src="https://www.jqueryscript.net/demo/Custom-Classes-Bootstrap-Tooltips/bootstrap-tooltip-custom-class.js"></script>


<form action="/register" method="post">
    <div class="form-group row flex-v-center">
        <div class="col-xs-3 col-sm-2 text-left">
            <label for="username"> Username: </label>
        </div>
        <div class="col-xs-5 text-left">
            <input name="username" id="username" type="text" class="form-control-sm" data-custom-class="tooltip-danger" data-togle="tooltip">
            <small id="usrndHelpBlock" class="d-block form-text text-muted">
                Username must be at least 1 character long and must not be already registered.
            </small>
        </div>
    </div>
    <div class="form-group row flex-v-center">
        <div class="col-xs-3 col-sm-2 text-left">
            <label for="pwd">Password: </label>
        </div>
        <div class="col-xs-5 text-left">
            <input name="password" id="pwd" type="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" class="form-control-sm" data-toggle="tooltip" data-placement="aright" data-custom-class="tooltip-primary" title="">
            <small id="passwordHelpBlock" class="d-block form-text text-muted">
                Password must be at least 8 characters long , contain letters and numbers, and must not contain spaces, special characters, or emoji.
            </small>
        </div>
    </div>
    <div class="form-group row flex-v-center">
        <div class="col-xs-3 col-sm-2 text-left">
            <label for="conf">Confirmation: </label>
        </div>
        <div class="col-xs-5 text-left">
            <input name="confirmation" id="conf" type="text" class="form-control-sm" data-toggle="tooltip" data-placement="auto" data-custom-class="tooltip-primary" title="Confirmation doesn't match password!">
            <small id="confHelpBlock" class="form-text text-muted">
                Confirmation must match password.
            </small>
        </div>
    </div>
    <div class="form-group row flex-v-center">
        <div class="col-xs-8">
            <button id="b_register" class="btn btn-primary">Register Now !</button>
        </div>
    </div>
</form>
...