Javascript 如何从有效控件禁用bootstrap 4验证样式_Javascript_Jquery_Html_Css_Bootstrap 4

Javascript 如何从有效控件禁用bootstrap 4验证样式

javascript jquery html css bootstrap-4

Javascript 如何从有效控件禁用bootstrap 4验证样式,javascript,jquery,html,css,bootstrap-4,Javascript,Jquery,Html,Css,Bootstrap 4,我正在为我的应用程序使用Bootstrap4样式。应用程序有两个文本框和一个提交按钮。当您单击“保存”按钮时，它将调用web API并异步获取一些详细信息（它不会重定向页面）。验证仅应用于第一个文本框（函数（）{ "严格使用",； addEventListener（'load'，function（））{ //获取要应用自定义引导验证样式的所有表单 var forms=document.getElementsByClassName（'needs-validation'）； //对它们进行循环

我正在为我的应用程序使用Bootstrap4样式。应用程序有两个文本框和一个提交按钮。当您单击“保存”按钮时，它将调用web API并异步获取一些详细信息（它不会重定向页面）。验证仅应用于第一个文本框

（函数（）{
"严格使用",；
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();

测试页
名称
请输入名称。
地址:
您可以覆盖有效验证的css。当您右键单击绿色复选框并选择inspect时，您可以看到哪个类导致绿灯亮起

因此，您应该指定不从引导继承这些。代码应如下所示：
<!DOCTYPE html>
<html>
<head>
  <style>
    .form-control.is-valid:focus, .was-validated :valid.form-control{ border-color:inherit !important;
    background-image: inherit !important;
    box-shadow:inherit !important;}

 </style>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Test Page</title>
    <script type="text/javascript">
        (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);
        })();
    </script>

</head>
<body>
    <form class="container needs-validation" novalidate id="myFrom" >
        <div class="form-group row mt-5">
            <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
            <div class="col-sm-10">
                <input type="tel" class="form-control" placeholder="Please enter your name" required />
                <div class="invalid-feedback">
                    Please enter the name.
                </div>
            </div>
        </div>
        <div class="form-group row mt-5">
            <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
            <div class="col-sm-10">
                <input type="tel" class="form-control" />
            </div>
        </div>
        <div class="form-group row">
            <input type="submit" class="btn btn-primary" style="width: 100px;" value="Save"/>
        </div>
    </form>
</body>
</html>


.form控件。有效：焦点。已验证：有效。form控件{边框颜色：继承！重要；
背景图像：继承！重要；
框阴影：继承！重要；}
测试页
（功能（）{
"严格使用",；
window.addEventListener（'load'，函数（）{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();
名称
请输入名称。
地址:

我添加的是head标签下面的样式标签和css选项
 例如，我不喜欢覆盖CSS样式，因此您也可以选择只指定要验证的字段，而不是整个表单
将类添加到.form组
元素（例如.validate me
）
你可能想看看
具体地说，不是向整个表单添加.was validated
，而是只向具有：invalid
伪类的表单元素添加.is invalid

此代码应适用于您的情况：
for (var i = 0; i < validateGroup.length; i++) {
    var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
    for (var j = 0; j < invalidGroup.length; j++) {
        invalidGroup[j].classList.add('is-invalid');
    }
}

for（变量i=0；i
来自@Ilker Kadir Ozturk的帖子只使用了样式，但我的有效字段边框继承了我不想使用的先前颜色（黑色）。我正在razor页面中使用Bootstrap4和ASP.NETMVC。这是他用我的颜色（#DDDDDD）调整的代码。我也在样式上方添加了我的评论：
 @*  This is to prevent the green color style on Bootstrap validation to be applied to all textboxes when the info is valid.
    Only the red color style(validation failed style) should be applied if the validation failed.
    If the values are ok, no styling should be applied to the text boxes.
    Also when the "submit" button is clicked, there is no need for the green color styling to show up either.
 *@

<style>
    .form-control.is-valid:focus, .was-validated :valid.form-control {
        border-color: #DDDDDD !important;
        background-image: inherit !important;
        box-shadow: inherit !important;
    }
</style>

@*这是为了防止引导验证中的绿色样式在信息有效时应用于所有文本框。
如果验证失败，则仅应用红色样式（验证失败样式）。
如果值正常，则不应对文本框应用任何样式。
此外，单击“提交”按钮时，也不需要显示绿色样式。
*@
.form控件。有效：焦点。已验证：有效。form-control{
边框颜色：#DDDDDD！重要；
背景图像：继承！重要；
盒子阴影：继承！重要；
}
（函数（）{
"严格使用",；
window.addEventListener（'load'，函数（）{
const forms=document.getElementsByClassName（'needs-validation'）；
Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
const invalidGroup=form.queryselectoral（“：invalid”）；
for（设j=0；j
覆盖$formvalidation states
scss变量。这在Bootstrap5中有记录，但同样的技术也适用于版本4

$表单验证状态：(
“有效”：（验证成功时删除样式的部分解决方案
如果form.checkValidity（）
的计算结果为true，则从表单中删除已验证的类

反应引导中的一个示例：
有

下面是我使用jQuery解决类似问题的方法：
在submit方法中，插入以下行
for (var i = 0; i < validateGroup.length; i++) {
    var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
    for (var j = 0; j < invalidGroup.length; j++) {
        invalidGroup[j].classList.add('is-invalid');
    }
}

 @*  This is to prevent the green color style on Bootstrap validation to be applied to all textboxes when the info is valid.
    Only the red color style(validation failed style) should be applied if the validation failed.
    If the values are ok, no styling should be applied to the text boxes.
    Also when the "submit" button is clicked, there is no need for the green color styling to show up either.
 *@

<style>
    .form-control.is-valid:focus, .was-validated :valid.form-control {
        border-color: #DDDDDD !important;
        background-image: inherit !important;
        box-shadow: inherit !important;
    }
</style>

  (function () {
    'use strict';
    window.addEventListener('load', function () {
        const forms = document.getElementsByClassName('needs-validation');
        Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                const invalidGroup = form.querySelectorAll(":invalid");
                for (let j = 0; j < invalidGroup.length; j++) {
                    invalidGroup[j].classList.add('is-invalid');
                }
            }, false);
        });
    }, false);
})();

$form-validation-states: (
  "valid": (                               <-- delete this
    "color": $form-feedback-valid-color,
    "icon": $form-feedback-icon-valid
  ),
  "invalid": (
    "color": $form-feedback-invalid-color,
    "icon": $form-feedback-icon-invalid
  )
);

onSubmit = (e) => this.setState({ validated: !e.currentTarget.checkValidity()});