JavaFX Login Form Validation Example

In this JavaFX tutorial, we will learn how to design and validate a Login form in the JavaFX application.

Creating a Login form and validating form fields is a common activity when developing an application.

JavaFX Form Validation Example

Let's create a Login Form and validate the email address and password:

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;

public class Main extends Application {

    private String adminUsername = "admin";
    private String adminPassword = "admin";

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("JavaFX Login Example");
        GridPane grid = new GridPane();
        grid.setAlignment(Pos.CENTER);
        grid.setHgap(10);
        grid.setVgap(10);
        grid.setPadding(new Insets(25, 25, 25, 25));

        Text sceneTitle = new Text("Login");
        sceneTitle.setTextAlignment(TextAlignment.CENTER);
        sceneTitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 30));
        grid.add(sceneTitle, 0, 0, 2, 1);

        Label userName = new Label("Email Id:");
        grid.add(userName, 0, 1);

        TextField userTextField = new TextField();
        grid.add(userTextField, 1, 1);

        Label pw = new Label("Password:");
        grid.add(pw, 0, 2);

        PasswordField passwordBox = new PasswordField();
        grid.add(passwordBox, 1, 2);

        Button btn = new Button("Sign in");
        HBox hbBtn = new HBox(10);
        hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
        hbBtn.getChildren().add(btn);
        grid.add(hbBtn, 1, 4);

        final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);

        btn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent e) {
                String username = userTextField.getText().toString();
                String password = passwordBox.getText().toString();

                if(userTextField.getText().isEmpty()) {
                    showAlert(Alert.AlertType.ERROR, "Form Error!",
                            "Please enter your email id");
                    return;
                }
                if(passwordBox.getText().isEmpty()) {
                    showAlert(Alert.AlertType.ERROR, "Form Error!",
                            "Please enter a password");
                    return;
                }

                if(adminUsername.equals(username) && adminPassword.equals(password)){
                    infoBox("Login Successful!", null, "Success");
                } else{
                    infoBox("Please enter correct Email and Password", null, "Failed");
                }
            }
        });

        Scene scene = new Scene(grid, 300, 275);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private static void showAlert(Alert.AlertType alertType, String title, String message) {
        Alert alert = new Alert(alertType);
        alert.setTitle(title);
        alert.setHeaderText(null);
        alert.setContentText(message);
        alert.show();
    }

    public static void infoBox(String infoMessage, String headerText, String title){
        Alert alert = new Alert(Alert.AlertType.CONFIRMATION);
        alert.setContentText(infoMessage);
        alert.setTitle(title);
        alert.setHeaderText(headerText);
        alert.showAndWait();
    }
}

Let's understand the above source code step by step.

Create a GridPane Layout:

For the login form, we have used a GridPane layout because it enables you to create a flexible grid of rows and columns in which to layout controls. You can place controls in any cell in the grid, and you can make controls span cells as needed.

        GridPane grid = new GridPane();
        grid.setAlignment(Pos.CENTER);
        grid.setHgap(10);
        grid.setVgap(10);
        grid.setPadding(new Insets(25, 25, 25, 25));

Add Text, Labels, and Text Fields:

        Text sceneTitle = new Text("Login");
        sceneTitle.setTextAlignment(TextAlignment.CENTER);
        sceneTitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 30));
        grid.add(sceneTitle, 0, 0, 2, 1);

        Label userName = new Label("Email Id:");
        grid.add(userName, 0, 1);

        TextField userTextField = new TextField();
        grid.add(userTextField, 1, 1);

        Label pw = new Label("Password:");
        grid.add(pw, 0, 2);

        PasswordField passwordBox = new PasswordField();
        grid.add(passwordBox, 1, 2);

Add a Sign-in Button and Text:

        Button btn = new Button("Sign in");
        HBox hbBtn = new HBox(10);
        hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
        hbBtn.getChildren().add(btn);
        grid.add(hbBtn, 1, 4);

        final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);

Add Code to Handle an Event:

btn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent e) {
                actiontarget.setFill(Color.FIREBRICK);
                actiontarget.setText("Sign in button pressed");
            }
 })

Adding Validation for Login Form:

We are validating the username and password as "admin/admin":

                String username = userTextField.getText().toString();
                String password = passwordBox.getText().toString();

                if(userTextField.getText().isEmpty()) {
                    showAlert(Alert.AlertType.ERROR, "Form Error!",
                            "Please enter your email id");
                    return;
                }
                if(passwordBox.getText().isEmpty()) {
                    showAlert(Alert.AlertType.ERROR, "Form Error!",
                            "Please enter a password");
                    return;
                }

                if(adminUsername.equals(username) && adminPassword.equals(password)){
                    infoBox("Login Successful!", null, "Success");
                } else{
                    infoBox("Please enter correct Email and Password", null, "Failed");
                }

Alert and Info Popup Boxes:

    private static void showAlert(Alert.AlertType alertType, String title, String message) {
        Alert alert = new Alert(alertType);
        alert.setTitle(title);
        alert.setHeaderText(null);
        alert.setContentText(message);
        alert.show();
    }

    public static void infoBox(String infoMessage, String headerText, String title){
        Alert alert = new Alert(Alert.AlertType.CONFIRMATION);
        alert.setContentText(infoMessage);
        alert.setTitle(title);
        alert.setHeaderText(headerText);
        alert.showAndWait();
    }

Output:

Login form:

Validation Alert Box:

Validations for invalid email/username and password:

Login Success:

Related JavaFX Examples

1. JavaFX GridPane Example
2. JavaFX ColorPicker Example
3. JavaFX DatePicker Example
4. JavaFX MenuBar Example
5. JavaFX Radio Button Example
6. JavaFX TabPane Example
7. JavaFX Accordion Example
8. JavaFX Login Form Validation Example
9. JavaFX Form Validation - Registration Form Validation Example
10. JavaFX Line Chart Example
11. JavaFX Area Chart Example
12. JavaFX Scatter Chart Example
13. JavaFX Bar Chart Example
14. JavaFX Pie Chart Example
15. JavaFX Select and Multi-Select Example
16. JavaFX Check Box Example
17. Java Calculator Project