reactjs - How to validate form input fields using Ant design framework in react application

Question

I am trying to validate the form input field with decimal values, if the entered value is not number or decimal it should show error message, so far I have tried the below code example which is not validating characters and special character.

I would like to show error message when user enters, any other character than number and decimal

function position() {
   const { dispatch } = useContext(store);
    const [isDisable, setCheckBoxDisable] = useState(false)

    const onApply = (values) => {
        console.log('Success:', values);
        dispatch({
            type: "updateGPSCoordinates",
            latitude: values.latitude,
            longitude: values.longitude,
            altitude: values.altitude
        });
    };

return (
        <div>
            <div className="homepage-widget-header">
               <Form
                        {...layout}
                        className="gps-coordinates-form"
                        onFinish={onApply}

                    >
                        <Form.Item
                            label={GpsConstants.LATITUDE}
                            name="latitude"
                            initialValue="25.328380"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please enter latitude!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label={GpsConstants.LONGITUDE}
                            name="longitude"
                            initialValue="51.435989"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please enter longitude!',
                                },
                            ]}

                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label={GpsConstants.ALTITUDE}
                            name="altitude"
                            initialValue="0.0"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please enter altitude!',
                                },
                            ]}

                        >
                            <Input />
                        </Form.Item>
           </div>
        </div>
    )
}
export default GPSPosition

Thanks in advance Appreciate quick help

Answer 1

等待大神答复