DiegoLopesLima/Validate — pull request #14 by TimHeckel (2013-01-24 17:41:09+00:00)
Title: Added new features; tweaked equality comparers

Hi -- great start to your lightweight validation plugin. I've made some changes:

1. Changed `!=` and `==` to `!==` and `==` wherever necessary.

2. Modified the 'description` to use `defaults` by default, and to append class names (instead of replacing html content) to described-by elements:

description : {
defaults : {
required : 'error',
pattern : 'warning',
conditional : 'warning',
valid : ''
}
}

3. Set a default to do all field validation whenever the onChange/onBlur/etc event happens -- this is important because many validations are conditional, and these were not getting reset unless all validation was performeD:

validateAllOnChange: true,

4. Added a `describedby-msg` data- option so that helper messages can be included in the validation.

5. Changed the `validation` return string to be an object `{ valid: true|false, msg: 'Helper message' }` so that the msg comes across as well.

6. Defined a `defaults` callback so explicit setting of `data-describedby`, `data-description`, and `data-describedby-msg` are not needed -- the function can add them...

7. A `customTypes` object so I can bind validation to non `input` fields

For completeness sake, below is how I'm using the whole thing. One more note: I would consider refactoring the plugin to conform to the plugin best practices using a single `methods` param and the `data` object o maintain state.

$('#formId').validate({
sendForm: false
, submitForm: true
, onChange: true
, customTypes: {
fields: ".dropdown-toggle"
, isInvalid: function() {
return $(this).data("value");
}
, bindEvents: function(cb) {
$(".dropdown-toggle[data-required]").siblings(".dropdown-menu").children("li").children("a").bind("click", function(e) {
cb(e);
});
}
}
, invalid: function() {
//form is not valid for submission...
}
, valid: function() {
//form is valid
}
, defaults: {
describedBy: function() {
return $(this).parents(".control-group");
}
, describedByMsg: function() {
return $(this).siblings(".help-inline");
}
}
//what makes the validation PASS?
, conditional: {
eitherLocalIdNonexistentOrMatchesStateConfirmation: function() {
if ($("#confirmStateId").val() !== $(this).val()) {
return {valid: false, msg: 'State IDs must match'};
} else if ($("#localId").val() === "" && $("#confirmStateId").val() === "" && $(this).val() === "") {
return {valid: false, msg: 'A State ID is required if Local ID is missing'};
} else {
return {valid: true, msg: ''};
}
}
, onlyIfStateIdMissing: function() {
if ($("#stateId").val() === "") {
return {valid: false, msg: "A Local ID is required if the State ID is missing"};
} else {
return {valid: true, msg: ""};
}
}
, confirmStateId: function() {
if ($(this).val() === $("#stateId").val())
return {valid: true, msg: ''};
else
return {valid: false, msg: 'Must match State ID'};
}
, needGender: function() {
return false;
}
}
, description : {
defaults : {
required : 'error',
pattern : 'warning',
conditional : 'warning',
valid : ''
}
}
});

HTML:

State ID

Confirm State ID

Local Id
(District or otherwise)

Name

Nickname

Date of Birth

Grade

Grade

{{#each siteGrades}}

{{this}}

{{/each}}

Gender

Gender

Male

Female

Ethnicity

Ethnicity

{{#each ethnicities}}

{{name}}

{{/each}}

Home Language

Home Language

{{#each homeLanguages}}

{{name}}

{{/each}}

English Language (EL)

English Language (EL)
data-required

Yes

No

Special Ed

Special Ed

Yes

No