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));
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: