snitchbot | Dashboard & Remote Field Sensing

Jquery Validation

The jQuery Validation Plugin provides drop-in validation for your existing forms while making all kinds of customizations to fit your application easy.

Jquery Validation Documentation

Javascript

<script src="assets/lib/jquery-validation/jquery.validate.min.js"></script>

Registration Form

Name*

Email*

Password*

Confirm Password*

I accept the terms and privacy policy

<form class="form-validation" data-options='{"rules":{"confirmPassword":{"equalTo":"#password-field"}}}'>
  <div class="form-group">
    <label for="form-name">Name*</label>
    <input class="form-control" type="text" name="name" placeholder="Name" required id="form-name">
  </div>
  <div class="form-group">
    <label for="form-email">Email*</label>
    <input class="form-control" type="email" name="email" placeholder="Email" required id="form-email">
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="form-group">
        <label for="password-field">Password<span>*</span></label>
        <input class="form-control" type="password" name="password" placeholder="Password" required id="password-field">
      </div>
    </div>
    <div class="col-lg-6">
      <div class="form-group">
        <label for="confirm-password-field">Confirm Password<span>*</span></label>
        <input class="form-control" type="password" name="confirmPassword" placeholder="Confirm Password" id="confirm-password-field">
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input" id="wizard-checkbox" type="checkbox" name="terms" required>
      <label class="custom-control-label" for="wizard-checkbox">I accept the <a href="#!">terms </a>and <a href="#!">privacy policy</a></label>
    </div>
  </div>
  <button class="btn btn-primary btn-block" type="submit">Submit</button>
</form>

Contact Form

<form class="form-validation">
  <div class="form-group">
    <label for="contact-form-name">Name*</label>
    <input class="form-control" type="text" name="name" placeholder="Name" required id="contact-form-name">
  </div>
  <div class="form-group">
    <label for="contact-form-email">Email*</label>
    <input class="form-control" type="email" name="email" placeholder="Email" required id="contact-form-email">
  </div>
  <div class="form-group">
    <label for="contact-form-subject">Subject*</label>
    <select class="form-control custom-select" id="contact-form-subject" name="subject" required>
      <option value="">Select any subject ...</option>
      <option value="web-development">Web Development</option>
      <option value="web-design ">Web Design</option>
      <option value="graphics-design ">Graphics Design</option>
    </select>
  </div>
  <div class="form-group">
    <label for="contact-form-message">Message*</label>
    <textarea class="form-control" rows="3" required id="contact-form-message"></textarea>
  </div>
  <button class="btn btn-primary btn-block" type="submit">Submit</button>
</form>