Bootstrap 5 Form Validation with jQuery - Password Input Example
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Bootstrap 5 Form Validation</title>
<!-- Bootstrap 5 CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css'>
</head>
<body>
<div class='container mt-5'>
<form id='my-form' class='needs-validation' novalidate>
<div class='form-floating mb-3'>
<input type='password' class='form-control' id='password-input' name='password' placeholder='Password' minlength='6' required>
<label for='password-input'>Password</label>
<div class='invalid-feedback'>Password must be at least 6 characters.</div>
</div>
<button type='submit' class='btn btn-primary'>Submit</button>
</form>
</div>
<!-- Bootstrap 5 JS and jQuery -->
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js'></script>
<script>
// Enable form validation with jQuery
$('#my-form').on('submit', function(event) {
if (this.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
this.classList.add('was-validated');
});
<pre><code>// Add custom validation for password
$('#password-input').on('input', function() {
var password = $(this).val();
if (password.length < 6) {
this.setCustomValidity('Password must be at least 6 characters.');
} else {
this.setCustomValidity('');
}
});
</code></pre>
</script>
</body>
</html>
<p>This code demonstrates how to create a basic form with a password input using Bootstrap 5 and jQuery. We use Bootstrap's built-in validation features and add custom validation logic using jQuery to ensure the password meets the minimum length requirement.</p>
<ol>
<li>
<p><strong>Form Structure:</strong></p>
<ul>
<li>We create a Bootstrap form (<code><form></code>) and add the <code>needs-validation</code> class to enable Bootstrap's validation functionality.</li>
<li>The password input (<code><input type='password'></code>) is styled with Bootstrap classes and has <code>minlength='6'</code> and <code>required</code> attributes.</li>
<li>An error message (<code><div class='invalid-feedback'></code>) is included to provide feedback to the user if the password is not valid.</li>
</ul>
</li>
<li>
<p><strong>jQuery Validation:</strong></p>
<ul>
<li>jQuery's <code>on()</code> method is used to listen for the <code>submit</code> event on the form.</li>
<li>We check if the form is valid using <code>this.checkValidity()</code>. If not, the default submit action is prevented, and the <code>was-validated</code> class is added to show validation errors.</li>
<li>We implement custom validation for the password input using <code>on('input', function() {})</code> to check the password length. If it's less than 6 characters, a custom error message is set using <code>setCustomValidity()</code>. Otherwise, the error message is cleared.</li>
</ul>
</li>
</ol>
<p>Remember to include the Bootstrap 5 CSS and JavaScript files and jQuery in your HTML for the code to work properly.</p>
<p>This example demonstrates a simple password validation scenario. You can extend it further with additional validation rules and error handling as needed.</p>
原文地址: https://www.cveoy.top/t/topic/nnki 著作权归作者所有。请勿转载和采集!