HTMLform validation

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

Comments

  • Hi, @guy85

    How do i validate a htmlform element?

    check this workaround
    https://snippet.webix.com/f9rws8r0

  • 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

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

  • 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

  • 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
            }
          }
        },
    
  • 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!

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

  • 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

  • edited January 19

    with radio button validation

    it is possible with much deeper implementation.
    check this
    https://snippet.webix.com/2f70hn4d

    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.

  • 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

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!