Hi I would like some help on my password field where I have these 2 types of validation messages:
first, if the input for the password when user clicks on submit button it displays please enter password!
2nd if the input for the password is incorrect where it didn't meet the requirement it displays password does not meet the requirement!
Here my code for my html for the password and submit button
<div class="form-group row">
<label for="validationpassword" class="col-form-label passwordadduser">*Password:</label>
<div class="col-6 d-flex">
<input name="validationpassword" onChange="onChange()" type="password" class="form-control pass" id="password" placeholder="Password" required>
<i class="bi bi-eye-slash" id="togglePassword"></i>
<div style="margin-left: 15px;" class="invalid-tooltip password-empty" hidden>
Enter a password!
</div>
<div style="margin-left: 15px;" class="invalid-tooltip password-notmeet" hidden>
Password do not meet the requirement!
</div>
</div>
</div>
<button type="submit" class="btn-primary submitbutton">Add</button>
I have try a Jquery/JavaScript but seems not working i think i doing something wrong here
var empty = $(document.getElementById("password").value == '')
if (empty){
$('.pass').removeAttr('hidden');
}
else{
$('.pass').attr('hidden', '');
}
needed help as I am not familiar with how the input should work?
I had checked your code and it seams that que js/jquery part its not complete. Also theres a function call in the input while something is beeing written into the input that it's missing in your js code so the console throw an error everytime the input text is changed. A part from that, I had made some changes to your code so, if i understood well, it should make what you asking for
html:
<div class="form-group row">
<label for="validationpassword" class="col-form-label passwordadduser">*Password:</label>
<div class="col-6 d-flex">
<input name="validationpassword" onChange="onChange()" type="password" class="form-control pass" id="password" placeholder="Password" required>
<i class="bi bi-eye-slash" id="togglePassword"></i>
<div style="margin-left: 15px; display: none;" class="invalid-tooltip password-empty">
Enter a password!
</div>
<div style="margin-left: 15px; display: none;" class="invalid-tooltip password-notmeet">
Password do not meet the requirement!
</div>
</div>
</div>
<button class="btn-primary submitbutton" id="submitbutton">Add</button>
js/jquery (rember always import jquery library before executing your js code):
$('#submitbutton').click(function() {
var passwordInput = $('#password')
//Empty password validation
if (passwordInput.val() == '') {
$('.password-notmeet').hide();
$('.password-empty').show();
return;
}
//Any other requirements (ex: passwd length)
if (passwordInput.val().length < 6) {
$('.password-empty').hide();
$('.password-notmeet').show();
return;
}
//more code
});