How to restrict button click when textbox input violates the constraint

asked 2021-07-29 02:12:08 +0800

gscreddy gravatar image gscreddy

Consider there are only two UI components in a ZK's MVVM based application

  1. Textbox -> with constraint attribute set to some regex
  2. Button -> Upon clicking this, value in the textbox should be considered and some computation should be done

Negative scenarios when an user interacts with this application

  1. User enters some input which doesn't match with regex, so an error message will be popped beside textbox saying that invalid value has been entered. So, the user re-enters the correct value and then clicks the button. This scenario is fine
  2. User enters invalid input and still clicks the button without rectifying the input. Now, because the button is clicked the corresponding button functionality in Model file in triggered. How can we stop this from happening? Meaning how can we make the button functionality trigger only when the user inputs valid input?

Have seen people using forward attribute to achieve this. But, I am not clear. Please let me know if you know how to handle this.

delete flag offensive retag edit

2 Replies

Sort by ยป oldest newest

answered 2021-08-02 17:21:18 +0800

cor3000 gravatar image cor3000
6094 2 7
ZK Team

updated 2021-08-02 17:21:30 +0800

In order to 'link' a command with a constrained property you can use a conditional save binding.

<textbox value="@load(vm.idNumber) @save(vm.idNumber, before='submit')"
<button label="submit" onClick="@command('submit')"/>

Now the submit command will ensure the save binding above succeeds before executing the command. In case of an invalid value in the textbox the call to getValue with result in a WrongValueException -> failing the @save binding -> not executing the 'submit' command.

Here a runnable example: https://zkfiddle.org/sample/ujl6bu/1-conditional-save-binding-to-prevent-command

Here the diagram, in this case the safe-before phase will fail, preventing the command execution. https://books.zkoss.org/zk-mvvm-book/9.5/databinding/commandbinding.html#phases-of-command-execution

You might also consider using a binding @validator instead of a component contraint, to have more explicit control from your viewmodel.

link publish delete flag offensive edit

answered 2021-08-02 20:54:59 +0800

gscreddy gravatar image gscreddy

@cor3000 Many thanks for the response. It's helpful!

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2021-07-29 02:12:08 +0800

Seen: 7 times

Last updated: Aug 02

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More