Bootstrap 4 本机手动使输入字段无效
Posted
技术标签:
【中文标题】Bootstrap 4 本机手动使输入字段无效【英文标题】：Bootstrap 4 manually invalidate input field natively 【发布时间】：2020-12-14 00:06:40 【问题描述】：我想使用 Bootstrap 4 的表单验证。根据我读到的内容，您可以通过添加类“is-invalid”来使字段无效 - 这可行，但是当我想使用方法 checkValidity() 检查表单有效性时，它仍然说表单是有效的，这不是我所期望的。我希望利用本机 bootstrap 4 功能，而不是使用 jquery 验证器等插件。
$('#submit_button').on('click', function(e)
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form)
if (form.checkValidity() === false)
console.log("form is INVALID")
event.preventDefault();
event.stopPropagation();
else
console.log("form is VALID")
// form.classList.add('was-validated');
);
)<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
</head>
<body>
<form class="needs-validation" id="my_form">
<div class="form-group">
<div class="form-check">
<label for="taskname_l">Task Name</label>
<div class="form-inline">
<input type="text" class="form-control task_form is-invalid" id="taskname_in" name="taskname_in">
</div>
</div>
</div>
<button class="btn btn-primary" type="button" id="submit_button">Submit form</button>
</form>
</body>【问题讨论】：
【参考方案1】：选项 1：
使用 JQUERY 可以使用 .val() 函数
要获取 id 为“taskname_in”的输入字段的值，请使用此代码
$('#taskname_in').val()
选项 1 sn-p：
$('#submit_button').on('click', function(e)
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form)
if ($('#taskname_in').val() == '')
console.log("form is INVALID")
event.preventDefault();
event.stopPropagation();
else
console.log("form is VALID")
// form.classList.add('was-validated');
);
)<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
</head>
<body>
<form class="needs-validation" id="my_form">
<div class="form-group">
<div class="form-check">
<label for="taskname_l">Task Name</label>
<div class="form-inline">
<input type="text" class="form-control task_form" id="taskname_in" name="taskname_in">
</div>
</div>
</div>
<button class="btn btn-primary" type="button" id="submit_button">Submit form</button>
</form>
</body>选项 2： 使用表单验证器一次检查所有输入字段。
选项 2 sn-p：
(function()
'use strict';
window.addEventListener('load', function()
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form)
form.addEventListener('submit', function(event)
if (form.checkValidity() === false)
event.preventDefault();
event.stopPropagation();
form.classList.add('was-validated');
, false);
);
, false);
)();<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="" required>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<button class="btn btn-primary btn-sm" type="submit">Submit form</button>
</form>【讨论】：
感谢您的回复。我希望我可以一次检查整个表格，而不是为我将拥有的每个字段都这样做。我的过程将是做许多其他检查（不仅仅是空的），如果我不想通过检查，我会在输入中添加“is-invalid”，然后在最后检查整个的有效性形式。 添加选项 2，检查整个表单域 请看我对 Pritesh K 的回复。【参考方案2】：'is-invalid' 不会使该特定字段无效。它只是应用 CSS 使其看起来无效。
htmlElement.checkValidity() 的结果取决于它的约束。
假设，您添加带有“必需”约束的字段，并在表单或字段为空时对其运行 checkValidity()，您将收到 false 响应，这意味着表单或字段无效。
在您的情况下，只需在您的输入字段中添加 required ，如果您在字段为空时提交表单，您将收到无效的响应。
【讨论】：
啊，所以这只是应用 CSS - 想多了。我的事情是我不想检查“必需”作为唯一的约束。例如，我想通过 AJAX 检查输入值在我的 sql-lite db 中是否不存在，如果它已经存在，则将 IS-INVALID CSS 类应用于该字段，但我也希望它为 INVALID所以当我在用户点击提交时检查表单有效性时 - 它没有通过。我将对各种输入进行各种不同的检查。【参考方案3】：如果您有必填字段的默认 Bootstrap 验证码：
$(".needs-validation").submit(function()
var form = $(this);
if (form[0].checkValidity() === false)
event.preventDefault();
event.stopPropagation();
form.addClass('was-validated');
);
您只需要添加另一个验证，例如在输入上并使用 setCustomValidity。例如，如果您想检查密码是否相等并确认密码：
if ($('form input[name="confirm_password"').length > 0)
$('input[name="confirm_password"').on('change paste keyup', function()
var password = $(this).closest('form').find('input[name="password"').val();
if($(this).val() !== password)
this.setCustomValidity('Passwords must match');
else
this.setCustomValidity('');
);
;
如果您在输入元素旁边有一条无效反馈消息，它将显示该消息而不是您在此处设置的消息。
【讨论】：
以上是关于Bootstrap 4 本机手动使输入字段无效的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap Datepicker（避免文本输入或限制手动输入）
Bootstrap 4表单验证在使用无效反馈时不起作用，即使输入'is-valid'