你好,我正在使用 bootstrap 尝试在未填写登录名/密码时显示警告-div,但它似乎显示但再次隐藏所以根本不显示,这是代码:
<head>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script language="javaScript">
var namePattern = "^[a-z A-Z]{4,30}$";
$(document).ready(function(){
$("#bEnviar").click(function(){
var login = $("#login").val();
var password = $("#password").val();
if( login=="" ){
$("#login").css("display","block");
}
if( password="" ){
}
});
});
</script>
</head>
<body>
<form action="">
<div class="form-group col-md-12">
<label for="login" class="col-form-label">Login</label>
<input type="text" id="login" class="form-control" placeholder="Login">
<div id="login" class="alert alert-danger d-none" role="alert-danger">
Inserte nombre de usuario
</div>
</div>
<div class="form-group col-md-12">
<label for="password" class="col-form-label">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
<div id="pass" class="alert alert-danger d-none" role="alert-danger">
Inserte password
</div>
</div>
<div class="form-group col-md-12">
<button type='submit' id="bEnviar" class="btn btn-primary">Ingresar</button>
</div>
</form>
</body>
Javascript 工作正常,因为我尝试了一个警报,当我按下提交按钮时它显示了。
提前致谢!
最佳答案
您的代码中有 3 个主要错误:
有 2 个元素具有相同的 id
login
。如果您想在提交前检查您的输入,则不应使用
type="submit"
,因为它会在您单击按钮时提交表单。如果用户想先检查您的输入,请使用type="button"
。Class
d-none
有 cssdisplay: none!important;
所以如果你想让 div 显示,你需要删除它。
修复这些错误后的代码如下:
var namePattern = "^[a-z A-Z]{4,30}$";
$(document).ready(function(){
$("#bEnviar").click(function(){
var login = $("#login").val();
var password = $("#password").val();
if(!login) {
$("#login_error").removeClass("d-none");
} else $("#login_error").addClass("d-none");
if(!password) {
$("#pass").removeClass("d-none");
} else $("#pass").addClass("d-none");
if (login && password) {
// Submit form
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form action="">
<div class="form-group col-md-12">
<label for="login" class="col-form-label">Login</label>
<input type="text" id="login" class="form-control" placeholder="Login">
<div id="login_error" class="alert alert-danger d-none" role="alert-danger">
Inserte nombre de usuario
</div>
</div>
<div class="form-group col-md-12">
<label for="password" class="col-form-label">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password">
<div id="pass" class="alert alert-danger d-none" role="alert-danger">
Inserte password
</div>
</div>
<div class="form-group col-md-12">
<button type='button' id="bEnviar" class="btn btn-primary">Ingresar</button>
</div>
</form>
关于javascript - 如果表单字段的输入值为空,则尝试使用 jQuery 显示一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56921045/