Untitled

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS v4.0.0 (alpha 3) -->
   <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">

   <!-- FormValidation CSS file -->
   <link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">

   <!-- jQuery v1.9.1 or higher -->
   <script src="/vendor/jquery/jquery.min.js"></script>

   <!-- Tether library, which is required if you want to use Bootstrap tooltip -->
   <script src="/vendor/tether/dist/js/tether.min.js"></script>

   <!-- Bootstrap JS -->
   <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>

   <!-- FormValidation plugin and the class supports validating Bootstrap form -->
   <script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
   <script src="/vendor/formvalidation/dist/js/framework/bootstrap4.min.js"></script>  </head>
   <body>


   <form id="signinForm">
   <div class="form-group">
       <input type="text" class="form-control" name="username" placeholder="Username" />
       </div>

       <div class="form-group">
       <input type="password" class="form-control" name="password" placeholder="Password" />
       </div>

       <!-- Do NOT use name="submit" or id="submit" for the Submit button -->
       <button type="submit" class="btn btn-primary">Sign in</button>
</form>

<script>
$(document).ready(function() {
   $('#signinForm').formValidation({
        framework: 'bootstrap4',
        icon: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
            },
            fields: {
                username: {
                validators: {
                    notEmpty: {
                    message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                        },
                        regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: 'The username can only consist of alphabetical, number and underscore'
                    }

                    }
                    }
                    ,
                    password: {
                    validators: {
                    notEmpty: {
                    message: 'The password is required'
                    }
                    }
                    }
                    }
                    });
});
</script>


</body>
</html>