我在jquery中使用Bootstrap 4表单验证方法,验证工作正常,但由于某些原因,消息
<div>
获取“block”属性后更改整个窗体宽度。
这是我的html:
<div class="container l-login-container">
<main class="l-mainContent">
<form class="login needs-validation" id="login-form" novalidate>
<div class="row">
<div class="col">
<img src="assets/img/ayuntament-bcn.png" alt="Logo" height="30px">
</div>
<div class="col">
<img src="assets/img/logo.png" alt="Logo" height="30px">
</div>
</div>
<div class="form-group">
<label for="username" class="control-label">Usuario</label>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user fa" aria-hidden="true"></i>
</span>
</div>
<input type="text" class="form-control" name="username" id="username" placeholder="Ingressar nom d'usuari" required/>
<div class="invalid-feedback">No Validado</div>
<div class="valid-feedback">Datos Correctos</div>
</div>
</div>
<div class="form-group mb-4">
<label for="password" class="control-label">Contrasenya</label>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>
<input type="password" class="form-control" name="password" id="password" placeholder="Ingressar contrasenya" required/>
<div class="invalid-feedback">
No Validado
</div>
<div class="valid-feedback">
Datos Correctos
</div>
</div>
</div>
<button type="button" id="submitButton" class="btn btn-primary btn-sm btn-block" type="submit">Login</button>
</form>
</main>
</div>
这里是SCSS:
.l-login-container {
align-items: center;
display:flex;
height:100%;
justify-content: center;
.l-mainContent {
border:1px solid #eee;
padding:20px;
img {
display: block;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.login {
.form-group {
&:last-child {
margin-top: 1.5rem;
}
label {
font-weight: 400;
}
}
}
}
}
.l-mainContent {
margin:2rem 0 0 0;
padding:0 0 2rem 0;
}
下面是用于验证的js代码:
(function ($, window, document, undefined) {
"use strict";
$( document ).ready(function() {
$("#submitButton").click(function(event) {
var form = $("#login-form")
if (form[0].checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.addClass('was-validated');
})
});
})(jQuery, window, document);
以防万一,你需要看看一切是如何运作的:
here's a pen code