Bootstrap4のvalidateチェック

Bootstrap4のvalidateチェック

"" Bootstrap4のvalidateチェック

 Bootstrap4はvalidateを使用するために、

にnovalidateを追加するしないといけません。

valid-feedback

  • エラーがあるとき、入力欄が赤くなり、何も表示しません。
  • エラーがないとき、入力欄が緑になり、設定したメッセージが表示される、ここでは「Looks Good!」が表示される。

invalid-feedback

  • エラーがあるとき、入力欄が赤くなり、設定したメッセージが表示される、ここでは「Please choose a username」が表示される。
  • エラーがないとき、入力欄が緑になり、何も表示しません。
<form action="" class="needs-validation" novalidate>
    <div class="form-row">

        <div class="col-md-4">
            <label for="validationCustomer01">First Name</label>
            <input type="text" class="form-control" id="validationCustomer01" placeholder="First Name" value="" required>

            <div class="valid-feedback">
                Looks Good!
            </div>
        </div>

        <div class="col-md-4">
            <label for="validationCustomer02">Last Name</label>
            <input type="text" class="form-control" id="validationCustomer02" placeholder="Last Name" value="" required>
            <div class="valid-feedback">
                Looks Good!
            </div>
        </div>

        <div class="col-md-4">
            <label for="validationCustomer03">User Name</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroupPrepend">@</span>
                </div>
                <input type="text" class="form-control" id="validationCustomer03" placeholder="User Name" value="" required>
                <div class="invalid-feedback">
                    Please choose a username.
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="invalidCheck" required>
                <label for="invalidCheck" class="form-check-label">Agree to terms and conditions</label>
                <div class="invalid-feedback">
                    You must agree before submitting.
                </div>
            </div>
        </div>

        <button class="btn btn-outline-primary" type="submit">Submit Form</button>

    </div>
</form>

送信する際にエラーチェック

<script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (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>

カスタマイズ① emailとemail確認の入力内容をチェック

 送信する前にチェックを行う。

var validation = Array.prototype.filter.call(forms,function (form) {

    $('#email').on('input',function(){
        $('#confirm_email').prop('pattern',$(this).val());
    });

    ...
});

カスタマイズ② リアルタイムでエラーチェック

 form-controlクラスにイベントを追加する。blurする際に、エラーチェックを行う。

<script>
    (function () {
        'use strict';

        window.addEventListener('load', function () {
            var inputs = document.getElementsByClassName('form-control');

            var validation = Array.prototype.filter.call(inputs,function(input){

                input.addEventListener('blur',function (event) {
                    input.classList.remove('is-invalid');
                    input.classList.remove('is-valid');

                    if (input.checkValidity() === false) {
                        input.classList.add('is-invalid');
                    } else {
                        input.classList.add('is-valid');
                    }
                },false);
            });
        }, false);
    })();
</script>

参考

发表评论

电子邮件地址不会被公开。 必填项已用*标注