问题描述
此示例包含在引导程序文档中。我需要两个脚本才能工作。第一部分验证所有字段中的数据,第二部分计算数据。但是,只有第二个作品。我需要两个脚本才能工作。
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="valid-Feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" required>
<div class="valid-Feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-Feedback">
Please provide a valid city.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit" onclick="other();return false;" id="submit">Submit form</button>
</form>
<div class="col-md-12 mb-3">
<label for="result">TEXT RESULT</label>
<textarea rows="3" id="result" ></textarea>
</div>
<script>
function other() {
// SCRIPT 1 START - THIS SCRIPT DOES NOT WORK WHY?
(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();
alert(" this does not work ");
}
form.classList.add('was-validated');
},false);
});
},false);
})();
// END - THIS SCRIPT DOES NOT WORK WHY?
// SCRIPT2 THIS WORK
let s1 = document.querySelector('#validationCustom01').value;
let s2 = document.querySelector('#validationCustom02').value;
let s3 = document.querySelector('#validationCustom03').value;
concat = s1 + s2 + s3;
document.getElementById('result').innerHTML = concat;
}
</script>
当前,如果我填写所有字段并单击“提交”,则不会在TEXTAREA id结果中看到concat。好像所有数据都丢失了。 目的是填充字段,单击提交时必须计算concat并显示在TEXTAREA中,所有字段必须保留其值。 否则(例如,一个空字段)表示字段填充错误。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)