How to disable a TextField until the user has submitted the previous required field

Question

I am working on a project which includes adding customer information.

I have four TextFields that I wish to use to get the customer information from the user.

I want to disable each TextField until the user submits the previous required field. How do I do that?

I tried to do this for one of the text fields, but it did not work and is not complete:

TextField idTF = new TextField();
TextField nameTF = new TextField();
if (idTF.getText().isEmpty()) 
    nameTF.disableProperty();
TextField addressTF = new TextField();
TextField mobileTF = new TextField();

Use one or more observers to monitor the changes to the text fields, from there, make decisions about what needs to be done, for example https://stackoverflow.com/questions/30160899/value-change-listener-for-javafxs-textfield — MadProgrammer, Jan 09 '22 at 21:38

score 1 · Accepted Answer · answered Jan 10 '22 at 03:20

As mentioned by @MadProgrammer, you can add listener to the textProperty of the each TextField and turn off/on the disable property of the other textField, or alternatly you can create a BooleanBinding between the dependant fields.

The BooleanBinding can be created as below:

textField2.disableProperty().bind(
                    Bindings.createBooleanBinding(() -> textField1.isDisable() || textField1.getText() == null || textField1.getText().isEmpty(),
                            textField1.textProperty(), textField1.disableProperty()));

Below is the complete working example.

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TextFieldDemo extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        StackPane root = new StackPane();
        root.setPadding(new Insets(10));
        Scene scene = new Scene(root, 320, 300);
        primaryStage.setScene(scene);
        primaryStage.setTitle("TextField Demo");
        primaryStage.show();

        TextField tf1 = new TextField();
        TextField tf2 = new TextField();
        TextField tf3 = new TextField();
        TextField tf4 = new TextField();
        Button submitBtn = new Button("Submit");
        addBinding(submitBtn, tf1, tf2, tf3, tf4);
        VBox pane = new VBox(tf1, tf2, tf3, tf4, submitBtn);
        pane.setSpacing(10);
        root.getChildren().add(pane);
    }

    private void addBinding(Button submitBtn, TextField... textFields) {
        for (int i = 0; i < textFields.length; i++) {
            TextField tf = textFields[i];
            Node node = i == textFields.length - 1 ? submitBtn : textFields[i + 1];
            node.disableProperty().bind(
                    Bindings.createBooleanBinding(() -> tf.isDisable() || tf.getText() == null || tf.getText().isEmpty(),
                            tf.textProperty(), tf.disableProperty()));
        }
    }
}

How to disable a TextField until the user has submitted the previous required field

1 Answers1