ブートストラップ4スニペットで検証コードが実行されていません

Question

custom styles section of the Bootstrap 4 form pageの例を引用して質問してきましたが、その基本形式のスニペットを取得できません。たとえば、最後の3つのフィールドに何かを入力すると、検証メッセージが消えるはずです。私がここで何が不足しているか分からない。

// Example starter JavaScript for disabling form submissions if there are invalid fields 
 
(function() { 
 
    'use strict'; 
 

 
    window.addEventListener('load', function() { 
 
    var form = document.getElementById('needs-validation'); 
 
    form.addEventListener('submit', function(event) { 
 
     if (form.checkValidity() === false) { 
 
     event.preventDefault(); 
 
     event.stopPropagation(); 
 
     } 
 
     form.classList.add('was-validated'); 
 
    }, false); 
 
    }, false); 
 
})();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 

 

 

 
<form class="container" id="needs-validation" novalidate> 
 
    <div class="row"> 
 
    <div class="col-md-6 mb-3"> 
 
     <label for="validationCustom01">First name</label> 
 
     <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required> 
 
    </div> 
 
    <div class="col-md-6 mb-3"> 
 
     <label for="validationCustom02">Last name</label> 
 
     <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-6 mb-3"> 
 
     <label for="validationCustom03">City</label> 
 
     <input type="text" class="form-control" id="validationCustom03" placeholder="City" required> 
 
     <div class="invalid-feedback"> 
 
     Please provide a valid city. 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3 mb-3"> 
 
     <label for="validationCustom04">State</label> 
 
     <input type="text" class="form-control" id="validationCustom04" placeholder="State" required> 
 
     <div class="invalid-feedback"> 
 
     Please provide a valid state. 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3 mb-3"> 
 
     <label for="validationCustom05">Zip</label> 
 
     <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required> 
 
     <div class="invalid-feedback"> 
 
     Please provide a valid zip. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <button class="btn btn-primary" type="submit">Submit form</button> 
 
</form>

Answer 1

それはあなたが使用している依存関係です。これらを使用してlinkとscriptタグを置き換えます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 

// Example starter JavaScript for disabling form submissions if there are invalid fields 
 
(function() { 
 
    'use strict'; 
 

 
    window.addEventListener('load', function() { 
 
    var form = document.getElementById('needs-validation'); 
 
    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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 

 

 

 

 
<form class="container" id="needs-validation" novalidate> 
 
    <div class="row"> 
 
    <div class="col-md-6 mb-3"> 
 
     <label for="validationCustom01">First name</label> 
 
     <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required> 
 
    </div> 
 
    <div class="col-md-6 mb-3"> 
 
     <label for="validationCustom02">Last name</label> 
 
     <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-6 mb-3"> 
 
     <label for="validationCustom03">City</label> 
 
     <input type="text" class="form-control" id="validationCustom03" placeholder="City" required> 
 
     <div class="invalid-feedback"> 
 
     Please provide a valid city. 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3 mb-3"> 
 
     <label for="validationCustom04">State</label> 
 
     <input type="text" class="form-control" id="validationCustom04" placeholder="State" required> 
 
     <div class="invalid-feedback"> 
 
     Please provide a valid state. 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3 mb-3"> 
 
     <label for="validationCustom05">Zip</label> 
 
     <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required> 
 
     <div class="invalid-feedback"> 
 
     Please provide a valid zip. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <button class="btn btn-primary" type="submit">Submit form</button> 
 
</form>