HTMLform validation

Webix JS
1

Hi,
How do i validate a htmlform element?
Example, I have this loading a raw html form:
{
rows: [
{ view: “htmlform”, id: “myForm”, template: ‘{{ my_form }}’ }
]
}
And also, how do i use array syntax for input names? (https://docs.webix.com/api__refs__ui.htmlform.html)
Thanks

2

Hi, @guy85

How do i validate a htmlform element?
check this workaround
Code Snippet

3

Hi @intregal ,
Thanks for the suggestion, I am getting an error now (Uncaught TypeError: this.elements[h].config is undefined) I have added this to my js:
webix.extend($$(“myForm”), webix.ValidateData);
It seems to recognise the validate function now, but seems to fail inside it. Any ideas?
Thanks

4

you need to apply mixin to htmlform class, not instance

webix.extend(webix.ui.htmlform, webix.ValidateData);

also you have to handle onBeforeValidate event as shown in snippet above.
this is to make htmlelements behave like webix views.

5

Hi @intregal ,
Thanks, I have applied that extend to the htmlform class instead of the htmlform instance and get the same error in the console. I have all the code in the “on” attribute as per your snippet too. The error is coming from the webix.js file, not the code from your snippet - not sure if that helps?
I am using an older version (2.5) maybe thats the issue?
Thanks

6

I am using an older version (2.5) maybe thats the issue?
yes, as in old versions elements was ArrayLike NodeLİst

try to apply this hack

    onBeforeValidate: function(){
      if(this.elements instanceof NodeList){
        var elements = this.elements;
        this.elements = {};
        for(var i=0;i<elements.length;i++){
          this.elements[i] = elements[i];
        }
      }
      for(var name in this.elements){
        this.elements[name].config = {name};
        this.elements[name].isVisible = function(){
          return this.offsetParent != null
        }
        this.elements[name].isEnabled = function(){
          return !this.disabled
        }
      }
    },
7

Hi @intregal ,
That is a great solution, thank you it seems to be validating now, but I have another question - how can i get it to validate using the htmlform input “required” attribute and not use the webix “rules” attribute?
There is no easy way for me to create the rules list from the htmlform.
Thanks in advance!

8

try to pass data in attributes
check this
https://snippet.webix.com/x43o06l8
you can pass even special error message in the attributes

9

Hi @intregal ,
Thanks again for your help on this, starting to get there now!
Sorry but I have one more question, with radio button validation I want to require just one pressed (obviously) but not sure how to get this edge case working with this since all the inputs need the webix-required attribute?
Thanks

10

with radio button validation
it is possible with much deeper implementation.
check this
Code Snippet

P.S. I’ve checked snippet with v2.2 and it looks like implementation will not work properly with old versions.
You need to rewrite htmlform code almost completely.

11

Thanks @intregal for all your help, I cannot get it working on 2.5 so I will have to try another avenue, possibly have to use jquery or something.
Thanks again