How to achieve a HTML check in JavaScript and jQuery

Question

I want to create a check that will create the class form-group has-success has-feedback in a div and glyphicon glyphicon-ok form-control-feedback in an li .

What I am trying to achieve (when user has filled it out correctly):

<div class="form-group has-success has-feedback ">
  <div class="col-sm-10">
    <input type="text" class="form-control" id="inputSuccess">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</div>

How my code looks like:

function InputChecker(InputChecker, tracker) {
    let div = ($('<div/>', {
        'class': InputChecker
    }));
    return div;
}

function password(tracker) {
    let input = ($('<input/>', {
        'type': 'password',
        'name': 'password',
        'class': 'form form-control',
        'id': 'password',
        'placeholder': 'Fill in your password (minimum length of 8 characters required!)',
        'required': true
    })).on('keyup', function() {
        tracker.pwd = $(this).val();

        if ($(this).val().length < 8) {
            var x = InputChecker('form-group has-success has-feedback', tracker);
            console.log(x);
            $(this).after('<span class="glyphicon glyphicon-ok form-control-feedback"></span>');    
        } else {
            // Do something else
        }
    });
    return input;
}

How my document.ready looks like:

let inputFieldStructure = $(eBlock('col-md-6 col-md-offset-3', tracker).append(InputChecker('', tracker)));
inputFieldStructure.append(loginName(tracker), userName(tracker), password(tracker), confirmPassword(tracker)).appendTo('#registerAndLogin');

How my HTML looks like:

<body>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h1>test</h1>
            </div>

            <div class="panel-body">
                <form action="registerAndLogin.php" method="POST" id="registerAndLogin">
                </form>
            </div>

            <div class="panel-footer">
                <h1>test</h1>
            </div>
        </div>
    </div>

</body>

Answer 1

Just need two changes based upon information provided:

HTML:

<div id="passwordDiv">
<div class="col-sm-10">
    <input type="text" class="form-control" id="inputSuccess">
    <span id="passwordSpan"></span>
</div>
</div>

JS on success:

if ($(this).val().length < 8) {
    $("#passwordDiv").addClass("form-group");
    $("#passwordDiv").addClass("has-success");
    $("#passwordDiv").addClass("has-feedback");
    $("#passwordSpan").addClass("glyphicon");
    $("#passwordSpan").addClass("glyphicon-ok");
    $("#passwordSpan").addClass("form-control-feedback");
} else {
    // Do something else
}

How to achieve a HTML check in JavaScript and jQuery

Question

1 answers

solution1
0 ACCPTED 2018-11-20 16:21:33

How to achieve a HTML check in JavaScript and jQuery

Question

1 answers

solution1 0 ACCPTED 2018-11-20 16:21:33

solution1
0 ACCPTED 2018-11-20 16:21:33