CODEWITHSUNDEEP
javascriptreactjstypescriptantd
Feisser
Feisser

Reputation: 21

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!

Upvotes: 1

Views: 15556

Answers (3)

Feisser
Feisser

Reputation: 21

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

Upvotes: 0

Nico Peck
Nico Peck

Reputation: 502

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

Upvotes: 1

Ved
Ved

Reputation: 1028

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;

Upvotes: 2

Related Questions