it-roy-ru.com

Bootstrap 4 и плагин проверки jQuery

Я работаю над проектом, и мне нужно добавить простой способ проверки формы на стороне клиента, после чего я перешел на плагин проверки jQuery. Я играю вокруг некоторых базовых вещей, но я изо всех сил, когда это сделать, как это 

 enter image description here

До сих пор я сделал так много

 enter image description here

Мой HTML-код 

        <body>
        <form id="default-register-user" method="POST" action="index.php">
            <div class="form-row">
                <div class="col-md-4 mb-3">
                    <label for="validationServer01">First name</label>
                    <input type="text" class="form-control" id="validationServer01" placeholder="First name" 
                    required name="fname">
                </div>
                <div class="col-md-4 mb-3">
                    <label for="validationServer02">Email</label>
                    <input type="text" class="form-control" id="validationServer02" placeholder="Last name" required name="lname" minlength="4">
                </div>
                <div class="col-md-4 mb-3">
                    <label for="validationServerUsername">Username</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroupPrepend3">@</span>
                        </div>
                        <input type="text" class="form-control" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3"
                            required name="username">
                    </div>
                </div>
            </div>
            <button class="btn btn-primary" type="submit">Submit form</button>

            <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://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
                crossorigin="anonymous"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#default-register-user").validate({
                        rules: {
                            lfname: {
                                required: true,
                                minlength: 5,
                                maxlength: 20
                            },
                            lname: {
                                required: true,
                                minlength: 5,
                                maxlength: 20
                            },
                            username: {
                                required: true,
                                minlength: 6,
                                maxlength: 25
                            }
                        }
                    });
                });
            </script>
        </form>
    </body>

Мне нужно добавить 

  • Маленькое сообщение внизу поля ввода это действительный или неверный ввод
  • Нужно поставить зеленую или красную рамку вокруг поля ввода, когда оно допустимо или недействительно

Как я могу улучшить это, и кто-нибудь объяснит, как это работает? Я только что искал в Интернете и нашел, как это сделать с помощью Bootstrap 3, но некоторые классы изменены, и для этого требуется дополнительный jQuery.

Спасибо.!

1
Sahan Pasindu Nirmal

jQuery плагин Parsley делает то же самое ... Вы можете поиграть с моей скрипкой здесь: 

https://jsfiddle.net/djibe89/tu0ap111/

 // Parsley plugin initialization with tweaks to style Parsley for Bootstrap 4

 $("#my-form").parsley({

   errorClass: 'is-invalid text-danger',

   successClass: 'is-valid', // Comment this option if you don't want the field to become green when valid. Recommended in Google material design to prevent too many hints for user experience. Only report when a field is wrong.

   errorsWrapper: '<span class="form-text text-danger"></span>',

   errorTemplate: '<span></span>',

   trigger: 'change'

 }) /* If you want to validate fields right after page loading, just add this here : .validate()*/ ;

 // Parsley full doc is avalailable here : https://github.com/guillaumepotier/Parsley.js/
4
djibe