web-dev-qa-db-ja.com

有効なコントロールからbootstrap 4検証スタイルを無効にする方法

私はbootstrapアプリケーションに4つのスタイルを使用しています。アプリケーションには2つのテキストボックスと1つの送信ボタンがあります。[保存]ボタンをクリックすると、Web APIが呼び出され、非同期で詳細が取得されます（ページはリダイレクトされません）検証は最初のテキストボックスにのみ適用されます。

(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);
})();
<!DOCTYPE html>
<html>

<head>
  <!-- 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>
</head>

<body>
  <form class="container needs-validation" novalidate>
    <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>

私の問題：

テキストボックスに値を入力せずに[保存]ボタンをクリックすると、緑色の色スタイル（検証trueスタイル）が[アドレス]テキストボックスに適用されます。そんなことは起こりません。

検証が失敗した場合に適用する必要があるのは、赤い色のスタイル（検証に失敗したスタイル）だけです。値を入力した場合（検証はtrue）、テキストボックスにスタイルを適用する必要はありません。

また、[名前]テキストボックスに値を入力して[保存]ボタンをクリックすると、そのテキストボックスに緑色のスタイルを設定したくありません。

スクリーンショット：

Screenshot

javascriptjqueryhtmlcssbootstrap-4
5
Prabodha

この答え を見たいと思うかもしれません。

具体的には、フォーム全体に.was-validatedを追加する代わりに、.is-invalid疑似クラスを持つフォーム要素に: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');
    }
}
1
Zac
  (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);
})();
1
user3921974

@Ilker Kadir Ozturkからの投稿は、スタイルを使用するだけでうまくいきましたが、私の有効なフィールドの境界線は、使用したくない以前の色（黒）から継承されました。私はBootstrap 4とかみそりのページでASP.NET MVCを使用しています。これは私の色（#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>
0
Mario Levesque