There are 3 input fields in a simple form, each with its own regex pattern.
The 'Password' and 'Confirm Password' fields must match. If they don't, a message "Not Matching" is displayed. If they do, "Valid" is displayed.
I am trying to figure out how to use JavaScript to force the Bootstrap 4 validation to display a red border and 'X' icon in the following scenario:
If I enter 'aa' in the 'Password' field (which matches the regex), it shows a valid green border and a 'V' icon.
Then if I enter 'aa' in the 'Confirm Password' field (also matching the regex), it again shows a valid green border and 'V' icon.
But when I add another character to 'Confirm Password', it immediately displays "Not Matching", even though according to the regex it should still be green with a 'V' icon.
https://i.sstatic.net/c2NZy.jpg
I need help forcing the red border and 'X' icon to appear in this case.
Here is my code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
input[type="submit"]:disabled {
background-color: red;
}
</style>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-4 offset-md-4">
...
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
// Check if passwords match
...
});
</script>
Thank you!