Live Demo - Bootstrap 4 With Parsley Jquery Form Validation Example

See Free Live Demo example of We are giving you bootstrap 4 with parsley jquery plugin demo. parsley jquery is use for form validation. Usign this plugin you can set your custom error message. jquery(...).parsley is not a function then we help you. In this example we are giving you all inputs demo. We allows to free snippets...

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Parsley - Examples | Simple form demo</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="custom.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <link href="http://parsleyjs.org/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/github.min.css" rel="stylesheet">
    <link href="http://parsleyjs.org/src/parsley.css" rel="stylesheet">
  </head>
  <body>
    <div class="container main-section">
      <div class="row">
        <div class="offset-lg-3 col-lg-6 form-section p-4">
          <div class="col-lg-12 text-center header-title">
            <h1>Ragister</h1>
          </div>
          <div class="form-group example mt-5">
            <div class="bs-callout bs-callout-warning hidden">
              <h4>Oh snap!</h4>
              <p>This form seems to be invalid :(</p>
            </div>
            <div class="bs-callout bs-callout-info hidden">
              <h4>Yay!</h4>
              <p>Everything seems to be ok :)</p>
            </div>
            <div class="col-lg-12">
              <form id="demo-form" data-parsley-validate>
                <label for="fullname">Full Name * :</label>
                  <input type="text" class="form-control" name="fullname" data-parsley-required-message="Full Name is Required" data-parsley-type="integer"  autocomplete="off" required />
                <label for="email">Email * :</label>
                  <input type="email" class="form-control" name="email" data-parsley-required-message="Email is Required" data-parsley-trigger="change" required />
                <label for="gender">Gender *:</label>
                <p>
                  M: <input type="radio" name="gender" id="genderM" value="M" required data-parsley-required-message="Gender is Required"/>
                  F: <input type="radio" name="gender" id="genderF" value="F" />
                </p>
                <label for="hobbies">Hobbies (Optional, but 2 minimum):</label>
                <p>
                  Skiing <input type="checkbox" name="hobbies[]" id="hobby1" value="ski" data-parsley-mincheck="2" /><br>
                  Running <input type="checkbox" name="hobbies[]" id="hobby2" value="run" /><br>
                  Eating <input type="checkbox" name="hobbies[]" id="hobby3" value="eat" /><br>
                  Sleeping <input type="checkbox" name="hobbies[]" id="hobby4" value="sleep" /><br>
                </p>
                <p>
                <label for="heard">Heard about us via *:</label>
                <select id="heard" required class="form-control" data-parsley-required-message="Heard About is Required">
                  <option value="">Choose..</option>
                  <option value="press">Press</option>
                  <option value="net">Internet</option>
                  <option value="mouth">Word of mouth</option>
                  <option value="other">Other..</option>
                </select>
                </p>
                <p>
                <label for="message">Message (20 chars min, 100 max) :</label>
                  <textarea id="message" class="form-control" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validation-threshold="10"></textarea>
                </p>
                <input type="submit" class="btn btn-success btn-lg w-100" value="submit"/>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="http://parsleyjs.org/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="http://parsleyjs.org/bower_components/bootstrap/js/affix.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
    <script src="http://parsleyjs.org/dist/parsley.js"></script>

</body>
</html>

body{
  background:-webkit-radial-gradient(#FFB85F,#FF7A5A); 
}
.main-section{
  margin-top:25px;
  font-family: 'Roboto Condensed', sans-serif;
}
.header-title{
  letter-spacing:2px;
  color:#F98441;
}
.form-section{
  background-color: #fff;
}
.header h3 {
  display: inline-block;
}
.social-buttons {
  padding: 5px 20px;
}
.code-block {
  margin-top: 20px;
}
body.examples .row h2 {
  color: #FF851B;
}
body.examples .row p {
  text-align: justify;
}
.bs-callout{
  margin: 20px 0;
  padding: 20px;
  border-left: 3px solid #eee;
}
.bs-callout h4{
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code {
  background-color: #fff;
  border-radius: 3px;
}
.bs-callout-danger {
  background-color: #fdf7f7;
  border-color: #d9534f;
}
.bs-callout-danger h4 {
  color: #d9534f;
}
.bs-callout-warning {
  background-color: #fcf8f2;
  border-color: #f0ad4e;
}
.bs-callout-warning h4 {
  color: #f0ad4e;
}
.bs-callout-info {
  background-color: #f4f8fa;
  border-color: #5bc0de;
}
.bs-callout-info h4 {
  color: #5bc0de;
}
.hundred {
  width: 100%;
}
form{
  font-size:18px;
  font-weight:800;
}
form .form-control{
  font-size:15px;
}
h3 {
  color: #FF851B;
}
p{
  font-weight: normal;
}
.back-to-top {
  margin-top: 10px;
  margin-left: 10px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #999;
}
.parsley-errors-list{
  color:red;
  margin-top:10px !important;
}