Conditional Enabling of Submit button in a form using React

Introduction

Well, today I am going to discuss a very common and useful topic about forms in React. At least most of you as front end developers would have encountered with this scenario. The use case we are going to address today is something like this.

Let’s say we have a simple application which enables us to add new users. For the simplicities sake let’s assume this input form consists of first name, last name and age. We make first name and last name mandatory while keeping age as an optional field. So the submit button of the form should get enabled only if the user has entered some values to both the first name and last name fields. In all other situations the submit button should be disabled. Check out the scaffolding below for more details. Notice that the submit button is disabled now since a value is not given for the First Name input field.


Workshop

Well, how are we going to address this requirement elegantly. I am using redux forms to get this thing done. We gonna enable submit button conditionally based on the values of input fields in our form. Let me first share the code with you and then I’ll explain it to you. Check out the code below.


First we need to connect our form to the application level redux state, so that we can get hold of the values later. For that we use connect helper. Then we fetch first name and last name properties from our application level state. These values are finally returned from our wrapped component. The values are then used inside the form to enable submit button conditionally. The isSubmitEnabled function is responsible for that. At last, this boolean flag is used to render the submit button accordingly.  You may find the code for entire solution here.


Conclusion

Well, it was a simple, yet very useful thing. We made it elegantly and smartly with a fairly less amount of code. Our code is much more simple, readable and composable with this solution. I hope that you will be using this somewhere down the line in your projects. That does it for this session. I’ll see you next time.

Comments

Post a Comment

Popular posts from this blog

Introducing Java Reactive Extentions in to a SpringBoot Micro Service

Image
Introduction Today we are going to take a look at Reactive Programming using Java8 and RxJava, which is a library for composing asynchronous and event-based programs by using observable sequences. RxJava stands for Reactive Extensions for the JVM. It extends the observer pattern [Gamma95] to support sequences of data/events and adds operators that allow you to compose sequences together declaratively while abstracting away concerns about things like low-level threading, synchronization, thread-safety and concurrent data structures [1]. Pre-Requisites : Having a good knowledge about Java8, Functional Programming and spring boot microservices. What is Reactive programming? In essence, Reactive programming is an asynchronous programming paradigm concerned with data streams. The system time, a list of entries from the DB/API, user clicks, everything can be a stream of data. Data from different streams can easily be combined and transformed, and in the end processed/observed by the
Read more

Optimal binary search trees

Image
Suppose that we are designing a program to translate text from English to French. For each occurrence of each English word in the text, we need to look up its French equivalent. We could perform these lookup operations by building a binary search tree with $n$ English words as keys and their French equivalents as satellite data. Because we will search the tree for each individual word in the text, we want the total time spent searching to be as low as possible. We could ensure an $Θ(log_2 \;n)$ search time per occurrence by using a red-black tree or any other balanced binary search tree. Words appear with different frequencies, however, and a frequently used word such as the may appear far from the root while a rarely used word appears near the root. Such an organization would slow down the translation, since the number of nodes visited when searching for a key in a binary search tree equals one plus the depth of the node containing the key. We want words that occur frequently in the t
Read more

Edit distance

Image
Biological applications often need to compare the DNA of two (or more) different organisms. A strand of DNA consists of a string of molecules called bases, where the possible bases are adenine, guanine, cytosine, and thymine. Representing each of these bases by its initial letter, we can express a strand of DNA as a string over the finite set $\{A, C, G, T\}$. For example, the DNA of one organism may be $S1 = ACCGGTCGAGTGCGCGGAAGCCGGCCGAA$, and the DNA of another organism may be $S2 = GTCGTTCGGAATGCCGTTGCTCTGTAAA$. One reason to compare two strands of DNA is to determine how “similar” the two strands are, as some measure of how closely related the two organisms are. We can, and do, define similarity in many different ways. For example, we can say that two strands are similar if the number of changes needed to turn one into the other is small. [1] We formalize this notion of similarity in our Edit distance problem. 15-5 Edit distance - Problem Statement In order to transform one sour
Read more