JavaFX:文本字段的红色边框

Question

我有一个带有文本字段的表单,如果我点击"保存",我想给它们一个红色边框但是例如在必填字段中没有输入,"生日"字段的字母,....

我的文件:EditController.java,error.css

我已经尝试过:

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

,如果他们输入有效的东西,删除它:

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

并在CSS中:

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

但它没有改变任何东西.

出奇,

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

(以及一个空字符串来摆脱它)工作得很好但是如果我想稍后再添加更多它就不是"漂亮".

有谁知道如何修复CSS？

Answer 1

尝试

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

第一个设置未聚焦时的边框颜色,第二个聚焦时设置边框颜色.

在样式表中使用此text-field-red-border.css示例,以下示例有效:

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

顺便说一下,如果你使用的是JavaFX 8,那么赞成伪类而不是直接设置类,因为它更干净(你不需要所有丑陋的代码检查你只添加一次样式类和/或删除所有出现的类)更有效率.要设置和取消设置伪类,请执行以下操作:

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

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

然后css应该是

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

(注意冒号而不是.之间-text-field和error.)

Answer 2

使用javafx8 moderna样式时，可以使用以下CSS使边框类似于“焦点对准”的蓝色边框：

.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;
}

将css添加为类路径资源并使用以下命令加载它：

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

然后使用以下命令将其应用于文本字段：

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

Answer 3

有了这个，它现在工作得很好（它甚至不需要“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"));
}

在CSS中，我添加了以下内容（不幸的是，它不再使用“-fx-border-width：2px”更改边框宽度）：

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