JSFiddle - React, Tailwind, and code Playground

Mobile form validation

by tonytlwu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<img src="https://d3vv6lp55qjaqc.cloudfront.net/items/2M3M1d0l3J44340A2c3X/Image%202017-09-30%20at%2011.37.04%20am.png?X-CloudApp-Visitor-Id=372&v=5992e550" id="thumb" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-9">
      <h2>Form validation</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum
        dolor sit amet, consectetur adipiscing elit.</p>
      <form id="myForm">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" name="exampleInputEmail1" placeholder="Email" required>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" name="exampleInputPassword1" placeholder="Password" minlength="8" required>
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" name="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" name="checkboxField" required> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem...

CSS

img {
  max-width: 100%;
  height: auto;
}

#thumb {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 45%;
  opacity: 0.4;
  transform-origin: top right;
  transform: scale(0.55);
  transition: all 0.2s ease-out;
  z-index: 1;
}

#thumb:active {
  top: 50%;
  right: 50%;
  transform: scale(1) translate(50%, -50%);
  z-index: 2;
  opacity: 1;
}

#overlay-validate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  z-index: 1;
  display: none;
}

#validate-errors {
  padding: 0;
  margin: 0;
}

#validate-errors > li {
  list-style: none;
}

JavaScript

var options = {
  invalidHandler: function(event, validator) {
    var errors = validator.errorList;
    var firstErrorElement = errors[0].element;
    $('html, body').animate({
      scrollTop: $(firstErrorElement).offset().top - 140
    });
    $('#overlay-validate').show();
  },
  wrapper: 'li',
  errorLabelContainer: '#validate-errors',
  onfocusout: false,
  onclick: false,
  onsubmit: true
};

$('#myForm').validate(options);