{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/jquery-validate-native-unobtrusive-validation",
  "description": "Use HTML5 data attributes with jQuery Validation to simplify code and achieve validation unobtrusively. Ideal for dynamically added DOM elements.",
  "path": "/posts/jquery-validate-native-unobtrusive-validation",
  "publishedAt": "2013-06-26T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "jquery"
  ],
  "textContent": "Did you know that jQuery Validation natively supports the use of HTML 5 data attributes to drive validation unobtrusively? Neither did I - I haven't seen any documentation for it. However, I was reading the jQuery Validation test suite and that's what I spotted being used in some of the tests.\n\n\n\nI was quite keen to give it a try as I've found the Microsoft produced unobtrusive extensions both fantastic and frustrating in nearly equal measure. Fantastic because they work and they're integrated nicely with MVC. Frustrating, because they don't allow you do all the things that jQuery Validate in the raw does.\n\nSo when I realised that there was native alternative available I was delighted. Enough with the fine words - what we want is a demo:\n\n<iframe src=\"https://htmlpreview.github.io/?http://gist.github.com/johnnyreilly/5867188/raw/272b1b42f4773fe6df843550b3e3d457013522a8/Demo.html\" width=\"100%\" height=\"575\"></iframe>\n\nNot particularly exciting? Not noticably different to any other jQuery Validate demo you've ever seen? Fair enough. Now look at the source:\n\nDo you see what I see? Data attributes (both data-rule- and data-msg-s) being used to drive the validation unobtrusively! And if you look at the JavaScript files referenced you will see \\no sign\\ of jquery.validate.unobtrusive.js \\- this is all raw jQuery Validate. Nothing else.\n\nWhy is this useful?\n\nFirst of all, I'm of the opinion that it makes intuitive sense to have the validation information relevant to various DOM elements stored directly with those DOM elements. There will be occasions where you may not want to use this approach but, in the main, I think it's very sensible. It saves you bouncing back and forth between your HTML and your JavaScript and it means when you read the HTML you know there and then what validation applies to your form.\n\nI think this particularly applies when it comes to adding elements to the DOM dynamically. If I use data attributes to drive my validation and I dynamically add elements then jQuery Validate will parse the validation rules for me. I won't have to subsequently apply validation to those new elements once they've been added to the DOM. 1 step instead of 2. It makes for simpler code and that's always a win.\n\nWrapping up\n\nFor myself I'm in the early stages of experimenting with this but I thought it might be good to get something out there to show how this works. If anyone knows of any official documentation for this please do let me know - I'd love to have a read of it. Maybe it's been out there all along and it's just my Googling powers are inadequate.\n\nUpdated 09/08/2012\n\nIf you're using ASP.Net MVC 3+ and this post has been of interest to you then you might want to take a look at this.",
  "title": "jQuery Validation - Native Unobtrusive Validation Support!"
}