Component: Text, Property: type=url. Issue: While typing URL, the red border appears inconsistently

Webix JS
1

Component Issues:

Component: Text

Property: type=url

Issue: While typing URL, the red border disappears as soon as URL is properly formatted, but does not get back to when the URL changes back to improperly formatted.
To duplicate the issue type the URL until red border disappears and then change the URL so that it gets improperly formatted.

Expected: the red border should be back.

Happens: the red border does not get back

Test Example: <text+type%3D"url"+label%3D"Width">123<%2Ftext>

2

This functionality uses native HTML5 controls. So logic of validation is not controlled by the library, but processed by a browser ( I suspect that behavior will differ between browsers )

You can consider usage of library-level validation in addition to the above one.
http://docs.webix.com/desktop__data_validation.html

3

Well, validation is a painful topic. :slight_smile:

Unfortunately, Webix validation is overcomplicated.
Specifically: validation cannot be assigned to each field as a property.
Instead, it requires a dedicated function where validation for all the form Fields is aggregated. This is inconvenient.

It would be more convenient to have a validation as a property for each Field:

  • less maintenance when Fields are added or removed

  • less code (no need in dedicated function)

In most cases regex expression per-Field level is enough.

This was perfectly implemented in DHTMLx library: regex validation per field level.

For example: validate:"[0-9]+"}
http://docs.dhtmlx.com/doku.php?id=dhtmlxform:it_valid

4

Validation can be assigned to each field separately. Any input in the form ( or in the toolbar ) can have a custom “validate” property ( attribute ), which will be used during form validation.

As for regexp, isn’t it better to store validation rules in one place, so they can be easily reused or changed ?

//once per app
webix.rules.intNumber = function(val){ return /[0-9]+/.test(val); }
//and you can use in any place
webix.ui({ view:"form", elements:[
    { view:"text", validate:"intNumber" }
]});
5

Thanks for clarification.
Really helpful.

Btw, there is no “validate” property in API for “Text” element:
http://docs.webix.com/api__refs__ui.text.html

But after your response I found “validate” property in Webix Validation API:
http://docs.webix.com/desktop__data_validation.html

Tried field-level validation based on your example and predefined rule “isNumber”.
No success:
http://snippet.webix.io/3923240a

Examples would be helpful.
Can you provide an XML-based example?

6

To my shame, it really doesn’t work with xml init :frowning:

I will post the updated build later today, which will resolve this problem and previously described issue with CDATA parsing from XML.

7

Please try to update codebase from the latest build - https://s3.amazonaws.com/uploads.hipchat.com/15721/61242/QIN5WV55xRyFso9/webix.zip

8

Thanks.

9

Tried with new codebase.
Either the validation still does not work, or my code is wrong.

Can you provide an example in XML?

See examples below:

http://snippet.webix.io/2e975ca7

http://www.softcreator.com/WebIx/Issues/007_Text_Validate/1-25-2014_1-34-03AM.png

10

Please check http://webix.com/snippet/0bb713e7

  • name field must be set for the input
  • rule logic must be defined
  • validation method of form must be called