Client-side Validation in Editor

Client-side Validation in Editor

ayzayz Posts: 30Questions: 15Answers: 0

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?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 49,042Questions: 1Answers: 7,166 Site admin
    Answer ✓

    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

  • ayzayz Posts: 30Questions: 15Answers: 0

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

  • allanallan Posts: 49,042Questions: 1Answers: 7,166 Site admin
    Answer ✓

    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

  • ayzayz Posts: 30Questions: 15Answers: 0

    I know exactly what you mean!

  • jybleaujybleau Posts: 1Questions: 0Answers: 0

    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...

  • ayzayz Posts: 30Questions: 15Answers: 0

    @jybleau: looks good, thanks!

Sign In or Register to comment.