S-validate.js

(svd.js) v1.01

Simple jquery plugin with Bootstrap 4 for validation your form!

Download(GitHub)







Get started


1) Add html:




  <form method="post">
    <div class="form-group row">
      <label for="inputCustom" class="col-sm-2 col-form-label">Custom</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputCustom" placeholder="Custom input">
        <small class="text-muted"></small>
      </div>
    </div>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        <small class="text-muted"></small>
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        <small class="text-muted"></small>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-sm-2">Checkbox</label>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Check me out
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="offset-sm-2 col-sm-10">
        <button type="button" id="submit" class="btn btn-primary">Sign in or Send</button>
      </div>
    </div>
  </form>
</div>





2) You should include Bootstrap 4 and Jquery:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

3) After include settings:



  var settings = {
              //  set #id for validation email
               emailID: '#inputEmail',
              //  set text for validation email
               ErrorTextEmail: 'Enter valid email',
               //  set #id for validation password
               passwordID: '#inputPassword',
              //  set text for validation password
              ErrorTextPassword: 'Must be minimum 7 characters long.',
                //  set value required chars for validation password
               MinCharsPass: '7',
               //  set #id for validation custom
               Custom: '#inputCustom',
              //  set text for validation custom
              ErrorTextCustom: 'Must be minimum 5 characters long custom.',
               //  set value required chars for validation custom form
               MinCharsCustom: '5'
            }


4) And include svd.js:



  <script src="svd.js"></script>


Done!






Author Ipatieff Serge