Validating via JS without markup on HTML file

[brunogdesign]

HI!

Is there a way to configure the validations without adding stuff to the html file, only via JS?
Something like searching the dom for a certain ID or Name and then associate the needed validators and messages....

Something like (this is from other validation plugin):

fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: 'The username can only consist of alphabetical, number and underscore'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }

Thanks ;)

[victorjonsson]

The whole point of this plugin is to not having to write js-code when configuring form validations. The feature you're requesting could easily be implemented as a module though.

[brunogdesign]

I'll keep searching for another plugin then.
@victorjonsson Thanks for your answer and keep improving this awesome plugin ;)

[victorjonsson]

Okey, if you want you can try the module 'jsconf'.

var config = {
  // ordinary validation config
  form : 'form'
  // reference to elements and the validation rules that should be applied
  validate : {
      'input-name' : {
         validation : 'length, alphanumeric',
         length : '5-12'
      },
      '.password-input-class' : {
        validation : 'length, strength'
        strength : '3',
        length : 'min10'
     },
     '#date-input-id' : {
        validation : 'date',
        format : 'dd/mm/yyyy'
     }  
  }
};

$.validate({
   modules : 'jsconf, security',
   onModulesLoaded : function() {
      $.setupValidation( conf );
   }
});

The first call to $.validate should only contain the modules declaration (it must also contain jsconf) and a callback for the event onModulesLoaded. In the callback you call the function $.setupValidation with the configuration object as argument.

The configuration object supports all the ordinary configuration options. Use the property validate to tell the jsconf-module which elements that should have validation rules.

[brunogdesign]

Thank you so much for your help! ;)

[victorjonsson]

All the configuration options for each validation rule is also supported. When applying them via markup they're all prefixed with data-validation-[OPTION]. When declaring them using the jsconf-module you simply remove the prefix.

<input type="file" multiple="multiple" name="images"
     data-validation="length mime size"
     data-validation-optional="true"
     data-validation-length="min2"
     data-validation-allowing="jpg, png, gif"
     data-validation-max-size="512kb"
     data-validation-error-msg="Error message..."
  />

Would be translated into:

var conf = {
   ...
   validate : {
      images : {
         validation : 'length mime size',
         optional : true, 
         length : 'min2'
         allowing : 'jpg, png, gif',
         'max-size' : '512kb',
         'error-msg' : 'Error message...'
      }
   }
};