在长期休假后，我又回到了 Web 开发领域，我正在使用 Bootstrap 并创建一个简单的联系表单。如果验证出现错误，我想添加几个类以使表单元素变成红色并在输入中放置小十字。
我使用了 Bootstrap 站点中的示例，并且它运行良好。一旦我将内容放入表单中，addClass 就不会粘住。输入闪烁红色并返回到灰色边框。我已经剥离了整个 html 以检查它是否是我所做的其他任何事情，并将错误范围缩小到标签。
非常感谢任何帮助。 PS 这是我的第一篇文章，如果我错过了任何内容，请道歉
<html>
<head>
<title>Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style type="text/css">
#emailError{
display: none;
}
</style>
</head>
<body>
<div class="container">
<form>
<div id="emailDiv" class="form-group">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control" id="email">
<div class="form-control-feedback" id="emailError">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-element">
<input type="submit" value="Sign Up" id="submitBtn">
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#submitBtn").click(function(){
$("#emailError").show();
$("#emailDiv").addClass("has-danger");
$("#email").addClass("form-control-danger");
});
</script>
</body>
</html>最佳答案
就像@AlonEitan所说，您需要禁用表单的默认操作，即提交表单并重新加载页面。您可以使用 e.preventDefault() 或 return false 禁用该操作。如果发现错误，您可以有条件地禁用它，也可以默认禁用它，然后在表单验证后手动提交。这是一个例子。
$("#submitBtn").click(function(e){
e.preventDefault();
if (there are errors) {
$("#emailError").show();
$("#emailDiv").addClass("has-danger");
$("#email").addClass("form-control-danger");
} else {
$('#formId').submit();
}
});
关于javascript - Bootstrap addClass 在表单中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43575968/