jQuery Validation Unobtrusive

by Sumesh KP

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
<form method="post" id="myForm">
 
  <div>
    <label for="Name">Name</label>
    <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
  </div>  
  <input type="submit" value="Draft" id="draft" class="cancel" formnovalidate="formnovalidate">
  <input type="submit" value="Save" id="save" />
</form>









<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    About this SO question:
    <a href='http://stackoverflow.com/q/39918920/1366033'>
        ASP.NET MVC - prevent submit of invalid form using jQuery unobtrusive validation
    </a>
</div>

JavaScript

$("form input, form textarea").on('change blur',function(e){
//debugger;
	console.log(this.name + ' ' + e.type + 'ed');
  $("#myForm").data('validator').element('#Name');
});

$("form input[type=submit]").on('click',function(){
  console.log(this.value + ' clicked');
});

$("form").submit(function(){
	console.log(this.id + ' submited');
  return false;
});