Custom jquery validation and unobtrusive JavaScript

Question

I am trying to write a special check that gives an error if html exists in the text box when they submit the form.

I have the following: its not working, and I'm not sure why.

also I don’t understand the unobtrusive part, can someone show me how to do this, since I see other examples on SO that have this.

the text area has a class of "note" form called "noteform"

<script type="text/javascript" > $(document).ready(function () { $.validator.addMethod('nohtml', function (value, element) { var text = $(".note").text(); if ($(text).length > 0) { return false; } else { return true; } }, 'Html not allowed'); // // **not sure what to do here** // $.validator.unobtrusive.adapters.add('containsnohtml', {}, function (options) { // options.rules['nohtml'] = false; // options.messages['nohtml'] = options.message; // }); $('#noteform').validate({ rules: { nohtml: "required nohtml" } }); }); </script> 

Answer 1

Here are a couple of questions. Firstly, you are trying to mix unobtrusive and regular jquery validation. If you want to use validate like this, then you need to make sure jquery.validate.unobtrusive.js NOT included. This is because jquery.validate.unobtrusive.js automatically parses and produces a validator for the document, and the very first thing that validate does is to check if the existing validator exists and if it completes.

If you decide to follow an unobtrusive route, be sure to use $.validator.unobtrusive.adapters.add , as this will lead to an error without jquery.validate.unobtrusive.js .

I would recommend you with an unobtrusive test, although I think you are using MVC3. If you are going with unobtrusive validation, you have two options, set the data- * attributes yourself by adding data-val="true" data-val-nohtml="Html not allowed" in your text box, as suggested by JohnnyO, and including a range with data-valmsg-for="note" data-valmsg-replace="true" to show an error message. Or you can create your own DataAnnotation attribute.

Here's the code for addMethod (needed for both types of validation)

  <script type="text/javascript"> (function ($) { $.validator.addMethod('nohtml', function (value, element) { // Test 'value' for html here. 'value' is the value of the control being validated. return true; // Return true or false depending on if it passes or fails validation, respectively. }, 'Html not allowed'); } (jQuery)); </script> 

and javascript needed for unobtrusive looks like this

 $.validator.unobtrusive.adapters.addBool('nohtml'); 

Regarding how to create a custom validation attribute, since I'm not sure which language you are using if you are using MVC3, or if you need this information for more than 4 months after you asked, I am going to just leave these links for reference.

A brief comparative example of traditional and unobtrusive JavaScript validation in MVC 3 - Mitchell Trent Blog
ASP.NET MVC 3 Custom Validation - Microsoft Developer Network

Answer 2

Although I have not tested this, I think that all you are missing is to bind the element that you want to check with the nohtml rule. Something like that:

 $('textarea.note').rules('add', { nothml: true }); 

Based on some of your descriptions, I assume that you are using ASP.NET MVC3. In this case, you will need to use an unobtrusive adapter if you create the server side of the validation attributes for your html element (for example, <textarea data-val="true" data-val-nohtml="Html not allowed"></textarea> ) . In this case, you will need an unobtrusive adapter to connect the element to use your nohtml rule.