Client-side Validation in Editor

ayz

Notwithstanding the need to validate on the server, there are times you want to save the round-trip.

From my understanding of the documentation, Editor has no config options to validate fields. Thus one should seek to manually validate in an event like preSubmit.

Is this understanding correct?

allan

That is absolutely correct. This is a shortcoming that I plan to address in future (perhaps 1.8), but I wanted to try and ensure that developers using Editor did their validation on the server-side first and foremost.

Allan

ayz

Would there be any advantage having it native to DataTables? One could as well use something like http://formvalidation.io right?

allan

No - when I get to this I do want to be able to hook into existing validation libraries. I did investigate this a while back and found it difficult since most assume that they should hook into the fields themselves, whereas I really just want the validation functions and to call them from Editor. There is a good chance things have changed a bit now - certainly the plan is to try and make use of existing libraries rather than starting afresh there.

Allan

ayz

I know exactly what you mean!

jybleau

If it can be useful to anyone.
For the moment I use HTML built-in attributes and form validation and then field.error to show the message...

Approximately like that:

           // editor fields declaration...
           fields: [{
              label: 'id',
              name: 'id',
              attr: { 
                required: true,
                name: 'id'
              }
            }, {
              label: 'Name',
              name: 'name',
              attr: { 
                required: true, 
                minlength: 1, 
                maxlength: 255,
                name: 'name'
              }
            }]

Then in editor presubmit :

 return (function checkValidity(form, scope) {
   var input
   if (!form.checkValidity()) {
     for (var i = 0; i < form.length; i++) {
       // check for each field
       input = form[i]
       if (!input.checkValidity() && input.name) {
         scope.field(input.name).error(input.validationMessage)
       }
     }
     return false
   }
   return true   
 })(editor.dom.form, this);

A dictionary and translation library can also be used to format the error message using the validity's properties.
ex:

          if (input.validity.tooLong) {
            return translationLib.instant('tooLong', {max: element.getAttribute('maxlength')})
          }

Looking forward for a built-in client-side form validation lib...

ayz

@jybleau: looks good, thanks!