How to enable a button automatically when fields in a window are validated ?

Webix JS
#1

Hi,

I have window with a text field and a ‘Submit’ button.

I want the ‘Submit’ button to be enabled when the text field has some value.
And the window should display a message that ‘name’ field should not remain empty while submitting.

I have made the button disabled work , but the enable is not working yet.

Snippet is here https://webix.com/snippet/a942a898

Thanks.

#2

https://webix.com/snippet/1eab5a44

#3

Thanks intregal.

It is working.
However, I am getting a webix message as 'Validation works only for fields with name" . Not sure how can I remove this message. Because it is just an example I have given here as ‘Name’ field. Actually it could be some ‘country’ field.

Also is it possible to show colored text message in the window ?
I have been able to show the message as $$(‘messageFieldId’).setValue("Some message’). But not able to put a color in it to make it more visible.

Thanks again.

#4

the best way is setting the name of element. but if you are sure that you do not need a name, then you can use a fake name in elementsConfig

{
    elementsConfig:{..., name:"$fake"}
}
#5

Thanks integral. It is working.

I am sorry to ask one more question. Lets say if the name typed in the text box matches a particular string (for example ‘hello’) then also the ‘Submit’ button would become disabled with a footnote message that name provided is not allowed.

I tried with ‘rules’ but not quite able to achieve it. Any demonstration would be great.
Can this be done ?

Thanks in advance.

#6

https://webix.com/snippet/cb3025c8

#7

Thanks a lot. It works awesome.

#8

@integral,

  1. how to specify both ‘key’ and ‘blur’ in validateEvent?
  2. i changed Your snippet by adding required form field: https://webix.com/snippet/a72c194b How to enable submit only if both required fields are not empy?
#9

https://webix.com/snippet/30512e62

#10

@integral,

Submit button is being enabled, but check how field values behave.
I tried simpler version https://webix.com/snippet/3423ba2d , but got same results.

#11

the best way is setting the name of element.

It is, but please note that name is a key in the hash of values in form, and only one input (i.e. value/rule) can be linked to a particular name.

both ‘key’ and ‘blur’ in validateEvent?
@keson instead of double validateEvent it is possible to call validate from the corresponding events: onChange (instead of onBlur) and onTimedKeyPress (or onKeyPress)

if both required fields are not empy?
onValidationSuccess fires if the entire form is valid

#12

@Listopad,

yep, it’s done in snippet from 4th december, but i can’t figure out why field values behave so strange.