gpt4 book ai didi

javascript - bootstrap 4 对 select 的验证似乎不起作用

转载 作者:行者123 更新时间:2023-12-03 01:27:53 26 4
gpt4 key购买 nike

我正在尝试使用 bootstrap 4 对 select 进行验证,但不能。

这是我尝试过的:

我的Javascript:

<script type="text/javascript">
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());

</script>

我的HTML:

<form class="container" novalidate="" action="/calc" method="POST" id="myForm">
<div class="form-group">
<label class="form-control-label" for="inputGroupSelect01">Power Type</label>
<select class="form-control" name="powertype" id="inputGroupSelect01" required="required">
<option selected>Choose Power Type...</option>
<option value="1">Single Phase</option>
<option value="2">Two Phase</option>
<option value="3">Three Phase</option>
</select>
<div class="valid-feedback"><i class="fa fa-check-circle"></i></div>
<div class="invalid-feedback">Please select power type!</div>
</div>
<div class="form-group">
<label class="form-control-label" for="voltage" >Voltage (U) in V</label>
<input type="number" class="form-control" name="voltage" id="voltage" min="0" step="0.1" placeholder="voltage (U) in V" required>
<div class="valid-feedback"><i class="fa fa-check-circle"></i></div>
<div class="invalid-feedback">Please fill voltage!</div>
</div>
<div class="form-group">
<label class="form-control-label" for="power" >Power (I) in A</label>
<input type="number" class="form-control" name="power" id="power" min="0" step="0.1" placeholder="power (I) in A" required>
<div class="valid-feedback"><i class="fa fa-check-circle"></i></div>
<div class="invalid-feedback">Please fill power!</div>
</div>
<div class="form-group">
<label class="form-control-label" for="phicos" >Phi cosine (Cosφ)</label>
<input type="number" class="form-control" name="phicos" id="phicos" min="0" step="0.1" placeholder="phi cosine (Cosφ)" required>
<div class="valid-feedback"><i class="fa fa-check-circle"></i></div>
<div class="invalid-feedback">Please fill phi cosine!</div>
</div>
<div>
<button type="submit" class="btn btn-success" id="btnSubmit">
<i class="fa fa-code"></i> Calculate
</button>
</div>
</form>
<hr>

<div class="container">
<span class="text-muted">Result of Power Active</span>
<input type="text" value="{{result}}" class="form-control is-valid" readonly>
<div class="valid-feedback">click to calculate</i></div>
</div>
</form>

除选择字段外,所有输入字段验证均有效,该字段显示文本 valid-feedback 并接受 POST。

有办法让它发挥作用吗?我不是 javascript 专家,所以也许你需要管理其他东西?

最佳答案

这是因为您的选择不是无效的。初始选项已被选择。如果您不希望这样做,您可以执行如下操作,然后验证消息就会起作用。

(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"/>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>



<form class="container" novalidate="" action="/calc" method="POST" id="myForm">
<div class="form-group">
<label class="form-control-label" for="inputGroupSelect01">Power Type</label>
<select class="form-control" name="powertype" id="inputGroupSelect01" required="required">
<option disabled selected value> select a phase </option>
<option value="1">Single Phase</option>
<option value="2">Two Phase</option>
<option value="3">Three Phase</option>
</select>
<div class="valid-feedback"><i class="fa fa-check-circle"></i></div>
<div class="invalid-feedback">Please select power type!</div>
</div>
<div class="form-group">
<label class="form-control-label" for="voltage" >Voltage (U) in V</label>
<input type="number" class="form-control" name="voltage" id="voltage" min="0" step="0.1" placeholder="voltage (U) in V" required>
<div class="valid-feedback"><i class="fa fa-check-circle"></i></div>
<div class="invalid-feedback">Please fill voltage!</div>
</div>
<div class="form-group">
<label class="form-control-label" for="power" >Power (I) in A</label>
<input type="number" class="form-control" name="power" id="power" min="0" step="0.1" placeholder="power (I) in A" required>
<div class="valid-feedback"><i class="fa fa-check-circle"></i></div>
<div class="invalid-feedback">Please fill power!</div>
</div>
<div class="form-group">
<label class="form-control-label" for="phicos" >Phi cosine (Cosφ)</label>
<input type="number" class="form-control" name="phicos" id="phicos" min="0" step="0.1" placeholder="phi cosine (Cosφ)" required>
<div class="valid-feedback"><i class="fa fa-check-circle"></i></div>
<div class="invalid-feedback">Please fill phi cosine!</div>
</div>
<div>
<button type="submit" class="btn btn-success" id="btnSubmit">
<i class="fa fa-code"></i> Calculate
</button>
</div>
</form>
<hr>

<div class="container">
<span class="text-muted">Result of Power Active</span>
<input type="text" value="{{result}}" class="form-control is-valid" readonly>
<div class="valid-feedback">click to calculate</i></div>
</div>
</form>

关于javascript - bootstrap 4 对 select 的验证似乎不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51438848/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com