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

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.

Comments

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

  • 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"}
    }
    
  • edited November 2017

    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.

  • Thanks a lot. It works awesome.

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

  • 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

  • @Listopad,

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

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!