Bootstrap 4 and jQuery Validation Plugin

jquery html forms jquery-validate bootstrap-4

11,224

the Parsley jquery plugin does the same. You can play with my fiddle here :

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

11,224

Author by

Sahan Pasindu Nirmal

Software development as the DRY KISS of YAGNI

Updated on June 05, 2022

Comments

Sahan Pasindu Nirmal about 2 years

I am working on a project and i need to add simple way to validate client side form then I moved to jQuery validation plugin. I play around some basic stuff, but I struggle when it make as this

So far I have done that much

My html code

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

I need to add

Little message down the input field it is valid or invalid input
Need to put green or red border around input field when it is valid or invalid

How can I improve this, and would someone explain how it works? I just searched the web and I found how to it with Bootstrap 3, but some class are change and need extra jQuery for it.

Thank you.!

Sahan Pasindu Nirmal about 6 years

That is charm man! and Simple thanks
Sahan Pasindu Nirmal about 6 years

how can i use bootstrap 4 <div class="valid-feedback"></div> instead of span tag?
djibe about 6 years

errorsWrapper: '<div class="invalid-feedback"></div>',