title: how to validate if one number is greater than other inside form rule?
body: <p>Form contains two items, both of it is an input field that accepts a number. I need to check if the value entered in the first input (start) is always less than the second (end) or else, show a validation error.</p>
  <p><a href="https://i.stack.imgur.com/nwk3r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nwk3r.png" alt="UI" /></a></p>
  <p>The above is wrapper inside antd form and each of it is a <code>Form.Item</code>.
  I need show validation message like this,</p>
  <p><a href="https://i.stack.imgur.com/tWLgh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tWLgh.png" alt="Validation error expected" /></a></p>
  <p>Code:</p>
  <pre><code>const App = () =&gt; {
    const [start, setStart] = useState(1);
    const [end, setEnd] = useState(2);
    const formRef = useRef();
  
    const handleSubmit = () =&gt; {
      if (end &lt; start) {
        console.log(&quot;End cannot be lesser than start&quot;);
      } else if (end === start) {
        console.log(&quot;End cannot be same as start&quot;);
      } else {
        console.log(&quot;Added :)&quot;, start, end);
      }
    };
  
    return (
      &lt;Form
        onFinish={handleSubmit}
        layout=&quot;vertical&quot;
        ref={formRef}
        requiredMark={false}
      &gt;
        &lt;div&gt;
          &lt;Form.Item
            name=&quot;formStart&quot;
            rules={[
              {
                required: true,
                message: &quot;Please select a form start&quot;
              }
            ]}
          &gt;
            &lt;InputNumber
              placeholder=&quot;Start&quot;
              min={1}
              max={100}
              onChange={(e) =&gt; setStart(e)}
            /&gt;
          &lt;/Form.Item&gt;
          &lt;Form.Item
            name=&quot;formEnd&quot;
            rules={[
              {
                required: true,
                message: &quot;Please select a form end&quot;
              }
            ]}
          &gt;
            &lt;InputNumber
              placeholder=&quot;End&quot;
              min={1}
              max={100}
              onChange={(e) =&gt; setEnd(e)}
            /&gt;
          &lt;/Form.Item&gt;
          &lt;Form.Item&gt;
            &lt;button htmlType=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/Form.Item&gt;
        &lt;/div&gt;
      &lt;/Form&gt;
    );
  };
  </code></pre>
  <p>If there is an alternative instead of using setState, It can also use ref (formRef.current)</p>
  <p>Code sandbox: <a href="https://codesandbox.io/s/basic-usage-antd-4-21-0-forked-4sri66?file=/demo.js" rel="nofollow noreferrer">https://codesandbox.io/s/basic-usage-antd-4-21-0-forked-4sri66?file=/demo.js</a></p>