Move Focus To Empty 'Required' Field On Submit - Tabable Required Fields

Tabable Required Fields is a basic HTML5 form validator plugin that automatically sets the focus on empty 'Required' form fields when you submit the form.

Can be used to validate the HTML form and prevent submitting until all the Required fields are filled out.

How it works:

• Prevents the default Enter keypress action and get to the focus function on page load
• Returns all required elements in the page or all input elements incase no required fields are detected
• Selects the next required field in the current page
• Applies the 'Flying Focus' effect to fields when activated

How to use it:

1. Add the 'required' attribute to your form fields.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1" required>Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

2. Download and place the jQuery Tabable Required Fields plugin after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="js/jQuery.tabable-required-focus.js"></script>

3. Just call the function and the plugin will take care of the rest.

$(document).ready(function(){
  $.tabableRequiredFieldsFocus();
});

---

This awesome jQuery plugin is developed by aymanrb. For more Advanced Usages, please check the demo page or visit the official website.