selectでのboostrap4検証が機能していないようです

debugcn 投稿 Dev

アルゴリズム

selectブートストラップ4で検証を機能させようとしていますが、機能しません。

これが私が試したことです：

私の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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]