JavaFX Login Form Validation Example

In this JavaFX source code example, we will learn how to design and validate a Login form in JavaFX.

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, use 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 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: