jQuery.validate – Setting default ignore rules

This post has been moved here.

Advertisements

jQuery.validate Custom Methods

We’ve been looking at validating a client side Url using the jQuery.validate (doc) plugin… and our rules were:

  • The field is required. You have to put the Url in.
  • Url must be an absolute path
  • Url must accept “http://localhost” style uri
  • Url must accept ip addresses (E.g. “http://10.0.0.12”)
  • We wanted to use a custom class called requiredUrl without adding custom rules to the validate method.
  • We want the code seperate from everything else, meaning we wanted to put the code in a different file, in other words, we didn’t want to polute the View (ASP.NET MVC) with rules nor alter the jquery.validate.js file directly.

The validate plugin allows you to add custom methods which allows the addition of a method that can be executed to validate a fields value… The method takes 3 parameters:

  1. The name of the method; in our case it is “requiredUrl”
  2. The function to do the validation… Returns true or false and takes 3 parameters: the value of the field, the element itself, and a params argument (not really sure why on this last one… haven’t looked it up as I’ve not had any need for it yet.)
  3. The third parameter is the message to show if the value is invalid.

Here is the requiredUrl method added to the validate plugin:

jQuery.validator.addMethod("requiredUrl", function(value, element, param) {
    var expression = /^(http:\/\/|https:\/\/)?((([\w-]+\.)+[\w-]+)|localhost)(\/[\w- .\/?%&=]*)?/i;
    return expression.test(value);
}, jQuery.validator.messages.url);

Notice the following:

  • The validation Regex requires something to be entered. Otherwise you would normally go as follows to also validate whether the field was required.

     return this.optional(element) || expression.test(value);

  • The last parameter is using the default Url validation message (jQuery.validator.messages.url)

With the following form field…

<input type=”text” class=”requiredUrl” />

…you could use the code as follows in your view:

$(document).ready(function() {
    $("#ServerForm").validate({
    rules: {
       webService: {
           requiredUrl: true
       }
    }

    });
});
  

The rule being added is for the form field with the Name of “webService” and the “requiredUrl” method is activated for that field, or in other words, this is the name of the method to execute when validation occurs for this field.

As already stated, I didn’t want to add this to the View so I wanted to just do the validation like this…

$(document).ready(function() {
    $("#ServerForm").validate(
);
});
  

To do that we need to register the css class “requiredUrl” with the validate plugin and tell it to use the “requiredUrl” method we registered earlier. I figure out you could do it like this:

jQuery.validator.classRuleSettings.requiredUrl = {requiredUrl: true};

The first “requiredUrl” refers to the css class to look for, and the second one refers to the name of the method that we added earlier.

Summary:

So the code would be:

jQuery.validator.addMethod("requiredUrl", function(value, element, param) {
    var expression = /^(http:\/\/|https:\/\/)?((([\w-]+\.)+[\w-]+)|localhost)(\/[\w- .\/?%&=]*)?/i;
    return expression.test(value);
}, jQuery.validator.messages.url);

jQuery.validator.classRuleSettings.requiredUrl = {requiredUrl: true};

Our form field would be:

<input type=”text” class=”requiredUrl” />

And our wireup to validate would be something like this:

$(document).ready(function() {
    $("#ServerForm").validate(
);
});

CodeRush Express Hide the “What Happened” message as well as other settings…

I’ve been wondering about this for a while now… "How do i edit the Code Rush settings”…

Ctrl+Shift+Alt+O {Letter “o”) does the job.

There are a few settings there that are nice. The best one is Editor | Code Style | Identifiers | fields and i changed it to “camel Case” … that’s been annoying me for a while.

I think you remove those messages that are useful when you start using the tool by changing the “Level” at the bottom left of the options dialog. (change from “New User” to “Advanced” or “Expert” not sure what they do at the moment…

jQuery Plugins List

jQuery Cookie Plugin

jQuery History Plugins