Question

I’ve created a validation jQuery widget to validate form fields. I want to be able to attach two (or more) validation rules some fields e.g.

$('#textField').validation({type: 'minLength', extraParameters: {length: '4',},}); 
$('#textField').validation({type: 'maxLength', extraParameters: {length: '20',},}); 

which sets both a minimum and maximum length rule on the field ‘textField’.

It seems that attaching multiple widgets with the same class makes the objects get overwritten. i.e. when creating the objects with the code below the page alerts with:
made a minLength
made a maxLength

but then when “Validation.validateAll();” is called the page alerts with:

Validating type is: maxLength
Validating type is: maxLength

i.e. the second object has overwritten the options of the first object.

Is it possible to make multiple instance of the same widget on the same object and I’m just doing it wrong?
Or is this not possible and I should use a different approach?

cheers
Dan

The code for the validation class is:

var Validation = {

pageValidations: [],

validateAll: function(){    
    for(var i=0; i<Validation.pageValidations.length ; i++){
        validation = Validation.pageValidations[i];
        validation.validate();
    }
},

setErrorMessage: function(errorString, parameters){
    var errorElementID = "" + this.element.context.name + "Error";
    $("#" + errorElementID).show();
    $("#" + errorElementID).text(errorString);
},

clearErrorMessage: function() {
    var errorElementID = "" + this.element.context.name + "Error";

    $("#" + errorElementID).hide();
},

validateMaxLength: function() { 
    try{
        var stringFromInput = this.element.context.value;
        var maxLength = this.options.extraParameters.length;

        if(stringFromInput.length > maxLength){ 
            this.setErrorMessage("Length of field is too long.");
            return false;
        }
    }
    catch(error){
        alert("Exception in validateMinLength, " + error);
    }
    return true;  
},

validateMinLength: function() {

    try{
        var stringFromInput = this.element.context.value;
        var minLength = this.options.extraParameters.length;

        if(stringFromInput.length < minLength){
            this.setErrorMessage("Length of field is too short.");
            return false;
        }
    }
   catch(error){
    alert("Exception in validateMinLength, " + error);
    }

    return true;  
},

validate: function (){

    var validationResult = false;

    alert("Validating type is: " + this.options.type);

    switch(this.options.type){
        case('minLength'):
            validationResult = this.validateMinLength();
        break;

        case('maxLength'):
            validationResult = this.validateMaxLength();
        break;
    }

    if(validationResult == false){
        this.options.isFailed = true;
    }

    return validationResult;
},

valueChanged: function (event){
    try{
        if(this.options.isFailed != false){
            var isValid = this.validate(); 

    if(isValid == true){
        this.clearErrorMessage();
    }
        }
    }
    catch(error){
       alert("Exception in valuechanged " + error);
    }
},

_create: function() {
        //alert("create called");
},

_init: function() {
    this.element.bind('change', jQuery.proxy(this, 'valueChanged'));

    $(this.element).addClass('validation');

    if(this.options.type == 'minLength'){
        alert("made a minLength ");
    }

    if(this.options.type == 'maxLength'){
        alert("made a maxLength ");
    }

    Validation.pageValidations.push(this);
},

options: {
    type: false,
    isFailed: false,
    extraParameters: {}
}
};

$.widget("dialogue.validation", Validation); // create the widget

function    setupValidationFields(){
    var object1 = $('#someMaxLength').validation({type: 'minLength', extraParameters: {length: '4',},}); 
var object2 = $('#someMaxLength').validation({type: 'maxLength', extraParameters: {length: '20',},}); 

Answer 1

An alternative approach you could use is having your validation widget receive a list of rules in the initialiser, something like the following:

$('#textfield').validation({
    rules: [
        {type: "minLength", …},
        {type: "maxLength", …}
    ]
});

That said, I think you should just use the excellent validation plugin that’s already there.