How to make form validation by using validator.js plugin?

Today now in this post i will show you How to make form validation by using validator.js plugin? Sometimes We need to add the validation on our form as like registration form, contact form, login form etc. we are always prefer to give the validation error after the page refresh but we can give the validation without any page refresh. If we are use bootstrap then we can do this by use easily validator.js plugin.

validator.js plugin is gives the client side validation without any page refresh. We can use the simply. validator.js plugin we need to add validation in our PHP project, or any framework like as laravel framework, codeigniter framework, symphony framework etc.

Now in this example i will give you how can we can make validation for require field, email, min length etc. just you have to need add attribute for the validation and it is very easy customize, you can also set your custom error message by using attribute.

So, let’s start and run bellow example.

Example:
<html lang="en">
    <head>
        <title>
            Bootstrap Validation example using validator.js
        </title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
        <script src="https://code.jquery.com/jquery-1.12.4.js">
        </script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js">
        </script>
    </head>
    <body>
        <br/>
        <div class="container">
            <div class="panel panel-primary" style="width:750px;margin:0px auto">
              <div class="panel-heading">Bootstrap Validation example using validator.js</div>
              <div class="panel-body">
                <form data-toggle="validator" role="form">
                  <div class="form-group">
                      <label class="control-label" for="inputName">Name</label>
                      <input class="form-control" data-error="Please enter name field." id="inputName" placeholder="Name"  type="text" required />
                      <div class="help-block with-errors"></div>
                  </div>
                  <div class="form-group">
                    <label for="inputEmail" class="control-label">Email</label>
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
                    <div class="help-block with-errors"></div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword" class="control-label">Password</label>
                    <div class="form-group">
                      <input type="password" data-minlength="5" class="form-control" id="inputPassword" data-error="must enter minimum of 5 characters" placeholder="Password" required>
                      <div class="help-block with-errors"></div>
                    </div>
                  </div>
                  <div class="form-group">
                      <label class="control-label" for="inputName">BIO</label>
                      <textarea class="form-control" data-error="Please enter BIO field." id="inputName" placeholder="Cina Saffary" required=""></textarea>
                      <div class="help-block with-errors"></div>
                  </div>
                  <div class="form-group">
                      <button class="btn btn-primary" type="submit">
                          Submit
                      </button>
                  </div>
                </form>
              </div>
            </div>
        </div>
    </body>
</html>

Read Also: How to convert file extension using CloudConvert in laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →