Enable/disable submit button

Hello,
i need this form enable submit button once all 4 fields are filled.
so i used LOSTFOCUS. but it seemed not to work properly.
if some input is deleted, the submit should be back to disable.

form

https://ep671a.axshare.com/#id=g0bu7u&p=page_1
P.s have no idea why my fontawesome icons can not be displayed

source file_form.rp (152.5 KB)

Form validation like this is common, and I wish Axure supported native functions to do things like this. Instead, you can create a kind of “form validation function” by creating an otherwise unused event of your submit button, or adding another hidden widget for this (perhaps utilizing the hotspot you have.) Basically, each time one of your input fields–and checkbox–lose focus (or even change content/states) you’ll want to “call” your “form validation function” to test your criteria and enable/disable the submit button accordingly.

Your sketch does a great job of specifying your criteria for enabling the button, and it looks like the code you’ve placed on each field should work for validating the form. But, rather than duplicating this for each field and checkbox, it is easier and more reliable to have this code in one place. In the updated file below, I’ve demonstrated how to do this by using the otherwise unused Moved event of your submit button. Basically, each time an input field loses focus, and when the selection state of your checkbox changes (losing focus on checkbox not good enough) it calls the Fire Event: Moved of the submit button. In this event, I just cut & pasted the code from your Lost Focus event of the first field. So, the submit button can kind of “take care of itself” and you now have a single test for validating the form–easier to test, update and maintain.

In addition, for good measure, I added a Key Up event to the first input field, with the same Fire Event: Moved action. In this way, if user starts entering a text value and the other three elements are “OK” then the submit button becomes enabled, letting user know it is now clickable. Likewise, if user deletes all input here the submit button immediately. In this way, the user doesn’t have to click away from the input field in order to see if the submit button will become enabled. If you like this behavior, copy&paste the Key Up event to the other input fields.

source file_form.rp (264.3 KB)

1 Like