19

I have a form with text fields and I want to give them a red border if I click on "save" but e.g. nothing was input in required fields, letters for the "birthday" field,... .

My files: EditController.java, error.css

I already tried:

tfFirstName.getStyleClass().add("error");

, to remove it if they enter something valid:

tfFirstName.getStyleClass().remove("error");

and in the css:

.text-field.error {  
 -fx-border-color: red ;  
 -fx-border-width: 2px ;  
}

But it didn't change anything.

Surprisingly,

tfFirstName.setStyle("-fx-border-color: red ; -fx-border-width: 2px ;");

(and an empty string to get rid of it) works just fine but it isn't "pretty" if I want to add more to it later.

Does anyone know how to fix the css?

4 Answers 4

26

Try

.text-field.error {
  -fx-text-box-border: red ;
  -fx-focus-color: red ;
}

The first sets the border color when it's not focussed, the second when it is focussed.

With this in the stylesheet text-field-red-border.css, the following example works:

import java.util.Collections;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class ValidatingTextFieldExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        GridPane root = new GridPane();
        TextField nameTF = new TextField();
        TextField emailTF = new TextField();

        root.add(new Label("Name:"), 0, 0);
        root.add(nameTF, 1, 0);
        root.add(new Label("Email:"), 0, 1);
        root.add(emailTF, 1, 1);

        setUpValidation(nameTF);
        setUpValidation(emailTF);

        Scene scene = new Scene(root, 250, 150);
        scene.getStylesheets().add(getClass().getResource("text-field-red-border.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void setUpValidation(final TextField tf) { 
        tf.textProperty().addListener(new ChangeListener<String>() {

            @Override
            public void changed(ObservableValue<? extends String> observable,
                    String oldValue, String newValue) {
                validate(tf);
            }

        });

        validate(tf);
    }

    private void validate(TextField tf) {
        ObservableList<String> styleClass = tf.getStyleClass();
        if (tf.getText().trim().length()==0) {
            if (! styleClass.contains("error")) {
                styleClass.add("error");
            }
        } else {
            // remove all occurrences:
            styleClass.removeAll(Collections.singleton("error"));                    
        }
    }

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

By the way, if you are using JavaFX 8, favor pseudoclasses over setting the class directly, as it's cleaner (you don't need all the ugly code checking that you only add the style class once and/or remove all occurrences of it) and more efficient. To set and unset the pseudoclass do:

final PseudoClass errorClass = PseudoClass.getPseudoClass("error");

tfFirstName.pseudoClassStateChanged(errorClass, true); // or false to unset it

Then the css should be

.text-field:error {
  -fx-text-box-border: red ;
  -fx-focus-color: red ;
}

(Note the colon instead of the . between -text-field and error.)

9
  • It also looks like "tfFirstName.setStyle("");" only clears it right after it got set. If I want to clear it later, it'll keep the border.
    – Neph
    Jun 15, 2014 at 17:13
  • You have to make sure you're not adding the style class multiple times (or when you clear it be sure to clear all occurrences). The style class is a list, so it can hold duplicate values.
    – James_D
    Jun 15, 2014 at 19:01
  • Updated with complete example.
    – James_D
    Jun 15, 2014 at 19:13
  • Sadly it doesn't work, it never shows the red border. The java & the css are in different packages (java: java/client, css: resources/gui) and the validation is done earlier. It only gets a red border if the validation throws an exception, so I split it up into 3 parts: "initialize" of the scene (= popup) calls "setUpValidation", in "catch" (exception) it calls "setRed()" (the if) and I call the "else" part when the "OK" button gets pressed to clear everything before validating. "setStyle" isn't pretty but at least it worked, is there a way to reset the textfields to default like that again?
    – Neph
    Jun 17, 2014 at 17:11
  • 1
    Thanks for the note on the pseudoclasses, didn't know about those! Jan 30, 2016 at 11:47
11

When using the javafx8 moderna style, you can use this css to make the border similar to the 'on focus' blue border:

.text-input.error {
    -fx-focus-color: #d35244;
    -fx-faint-focus-color: #d3524422;

    -fx-highlight-fill: -fx-accent;
    -fx-highlight-text-fill: white;
    -fx-background-color:
        -fx-focus-color,
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
    -fx-prompt-text-fill: transparent;
}

add the css as classpath resource and load it using:

scene.getStylesheets().add(
    getClass().getClassLoader().getResource(<your css resource path>).toString());

then apply it to text fields using:

// add error class (red border)
textField.getStyleClass().add("error");
// remove error class (red border)
textField.getStyleClass().remove("error");
0
2

The above mentioned solution by James_D works perfectly fine ( but not for JAVAFX 8.0 ). James have already mentioned the code changes for JAVAFX 8.0, i just tried that and it works like a charm. Here is the changed version for JAVAFX 8.0, just incase someone needs a quick reference.All CREDIT GOES TO JAMES_D

import java.util.Collections;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ObservableList;
import javafx.css.PseudoClass;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class ValidatingTextFieldExample extends Application {
private final PseudoClass errorClass = PseudoClass.getPseudoClass("error");
@Override
public void start(Stage primaryStage) {
    GridPane root = new GridPane();
    TextField nameTF = new TextField();
    TextField emailTF = new TextField();

    root.add(new Label("Name:"), 0, 0);
    root.add(nameTF, 1, 0);
    root.add(new Label("Email:"), 0, 1);
    root.add(emailTF, 1, 1);

    setUpValidation(nameTF);
    setUpValidation(emailTF);

    Scene scene = new Scene(root, 250, 150);
    scene.getStylesheets().add(getClass().getResource("text-field-red-border.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.show();
}

private void setUpValidation(final TextField tf) { 
    tf.textProperty().addListener(new ChangeListener<String>() {

        @Override
        public void changed(ObservableValue<? extends String> observable,
                String oldValue, String newValue) {
            validate(tf);
        }

    });

    validate(tf);
}

private void validate(TextField tf) {
    ObservableList<String> styleClass = tf.getStyleClass();
    if (tf.getText().trim().length()==0) {
        tf.pseudoClassStateChanged(errorClass, true);
    }
    else{
        tf.pseudoClassStateChanged(errorClass, false);
    }

}

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

}

-1

With this it now works pefectly fine (it doesn't even need "setUpValidation"):

public void initialize(URL arg0, ResourceBundle arg1) {
    removeRed(tfFirstName);
    removeRed(tfLastName);
}

public void OKButtonClicked() {
    try{
        //also: call validation class here
        removeRed(tfFirstName);
        removeRed(tfLastName);
    } catch(ValidationException e) {
        setRed(tfFirstName);
        setRed(tfLastName);
    }

}

private void setRed(TextField tf) {
    ObservableList<String> styleClass = tf.getStyleClass();

    if(!styleClass.contains("tferror")) {
        styleClass.add("tferror");
    }
}


private void removeRed(TextField tf) {
    ObservableList<String> styleClass = tf.getStyleClass();
    styleClass.removeAll(Collections.singleton("tferror"));
}

And in the css I added the following (unfortunately it didn't change the border width with "-fx-border-width: 2px" anymore):

.tferror {  
     -fx-text-box-border: red ;
     -fx-focus-color: red ;   
}
1
  • 2
    Uh, setUpValidation(...) is just a utility method I wrote to make it add and remove the red border when the text field was empty/not empty. It actually has little to do with your question other than it demonstrates my solution works.
    – James_D
    Jul 2, 2014 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.