Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

377
Vistas
Ant design Form.Item validation style

Is it possible to add a className prop to the Form.Item validation?

<Form.Item name="username" rules={[
   { required: true, message: '...' },
   className="customValidation" //<- something like that, but it is not working
]}>

Edit: Overriding the ant styles is not a valid solution!

over 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

If you want to change style of validation messages/input border color without using className property you can use the following solution.

Following code will change the error message color and input border color from red to blue (You can add your CSS properties).

index.css

.ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant- input, 
.ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper, 
.ant-form-item-has-error :not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper, 
.ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover, 
.ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover, 
.ant-form-item-has-error :not(.ant-input-number-affix-wrapper-disabled):not(.ant-  input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper:hover {
 background-color: #fff;
 border-color: blue;
 }

.ant-form-item-explain-error {
   color: blue;
 }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button } from 'antd';

const Demo = () => {
const onFinish = (values) => {
console.log('Success:', values);
};

const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
 };

 return (
<Form
  name="basic"
  labelCol={{
    span: 8,
  }}
  wrapperCol={{
    span: 16,
  }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
>
  <Form.Item
    label="Username"
    name="username"
    rules={[
      {
        required: true,
        message: 'Please enter your username!',
      },
    ]}
  >
    <Input />
  </Form.Item>

  <Form.Item
    wrapperCol={{
      offset: 8,
      span: 16,
    }}
  >
    <Button type="primary" htmlType="submit">
      Submit
    </Button>
  </Form.Item>
</Form>
);
};
export default Demo;
over 4 years ago · Juan Pablo Isaza Denunciar

0

I think it is impossible, There is not the attribute to add the className in antd Form.Item

enter image description here

enter image description here

If you want you can use the styled-component

I add my example code for you below.

export const CustomItem = styled(Form.Item)`
  .ant-form-item-explain.ant-form-item-explain-error {
    color: blue;
  }
`

-------------------------------------------

<CustomItem
    name='name'
    label='Name'
    rules={[{ required: true }]}
>
    <Input
        size='large'
        autoComplete='name'
    />
</CustomItem>

It was working for me.

enter image description here

over 4 years ago · Juan Pablo Isaza Denunciar

0

I created a Issue on GitHub and and they answered with

Form.Item supports className on it now.

https://github.com/ant-design/ant-design/issues/34110

over 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda