jQuery Validation Unobtrusive - Homegrown

<!DOCTYPE html>
<html>

  <head>
    <style>input.error { border-color: red; }</style>
  </head>
  <body>
    
    <form id="exampleForm">
      <div>
        <label for="FirstName">First Name</label>
        <input type="text" class="form-control"
               id="FirstName" name="FirstName" 
               data-msg-required="First Name is required." 
               data-rule-required="true">
        <span  class="field-validation-valid" 
               data-valmsg-for="FirstName" 
               data-valmsg-replace="true"></span>               
      </div>  
             
      <input type="submit" value="Submit">
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
    <script>
      $(function(){
        var options = {
          rules: {},
          messages: {}
        }
    
        $("form :input").each(function(i, el) {
          if (el.name || $(el).data("rule-required") == true) {
            options.rules[el.name] = {
              required: true
            }
            options.messages[el.name] = {
              required: $(el).data("msg-required")
            }
          }
        });
        
        $("#exampleForm").validate(options);
      });
    </script>
  </body>
</html>

// Code goes here

/* Styles go here */

[Original jQuery Validation Plugin](https://jqueryvalidation.org/documentation/)
[jQuery Validation Unobtrusive](https://github.com/aspnet/jquery-validation-unobtrusive)