Validate email and password in AuthPage antd

How can i config my validate for email and password in AuthPage antd?

8 Replies

Hi @Hưng Đinh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To validate the email and password in the <AuthPage /> component using Ant Design in refine, you can customize the formProps to include validation rules. Below is an example of how you can achieve this:

import React from "react";
import { AuthPage } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      formProps={{
        onFinish: (values) => {
          console.log("Success:", values);
        },
        onFinishFailed: (errorInfo) => {
          console.log("Failed:", errorInfo);
        },
      }}
    >
      <Form.Item
        name="email"
        rules={[
          {
            type: "email",
            message: "The input is not valid E-mail!",
          },
          {
            required: true,
            message: "Please input your E-mail!",
          },
        ]}
      >
        <Input placeholder="Email" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!",
          },
        ]}
      >
        <Input.Password placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Login
        </Button>
      </Form.Item>
    </AuthPage>
  );
};

export default MyLoginPage;

import React from "react";
import { AuthPage } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      formProps={{
        onFinish: (values) => {
          console.log("Success:", values);
        },
        onFinishFailed: (errorInfo) => {
          console.log("Failed:", errorInfo);
        },
      }}
    >
      <Form.Item
        name="email"
        rules={[
          {
            type: "email",
            message: "The input is not valid E-mail!",
          },
          {
            required: true,
            message: "Please input your E-mail!",
          },
        ]}
      >
        <Input placeholder="Email" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!",
          },
        ]}
      >
        <Input.Password placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Login
        </Button>
      </Form.Item>
    </AuthPage>
  );
};

export default MyLoginPage;

In this example, the formProps are used to pass validation rules to the form component. The rules array in each Form.Item specifies the validation criteria for the email and password fields. For more details, you can refer to the formProps documentation (https://refine.dev/docs/authentication/components/auth-page/#formprops). If you need further customization, you can always refer to the Ant Design Form documentation for more advanced validation options. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@755372117809430589> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphire•2mo ago

i want validate my password with regex @kapa.ai i want validate my password with regex value

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To validate your password with a regex value in the <AuthPage /> component using Ant Design in refine, you can add a custom validation rule using the pattern property in the rules array. Below is an example of how you can achieve this:

import React from "react";
import { AuthPage } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      formProps={{
        onFinish: (values) => {
          console.log("Success:", values);
        },
        onFinishFailed: (errorInfo) => {
          console.log("Failed:", errorInfo);
        },
      }}
    >
      <Form.Item
        name="email"
        rules={[
          {
            type: "email",
            message: "The input is not valid E-mail!",
          },
          {
            required: true,
            message: "Please input your E-mail!",
          },
        ]}
      >
        <Input placeholder="Email" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!",
          },
          {
            pattern: new RegExp("^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$"),
            message: "Password must be minimum 8 characters, at least one letter and one number",
          },
        ]}
      >
        <Input.Password placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Login
        </Button>
      </Form.Item>
    </AuthPage>
  );
};

export default MyLoginPage;

import React from "react";
import { AuthPage } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      formProps={{
        onFinish: (values) => {
          console.log("Success:", values);
        },
        onFinishFailed: (errorInfo) => {
          console.log("Failed:", errorInfo);
        },
      }}
    >
      <Form.Item
        name="email"
        rules={[
          {
            type: "email",
            message: "The input is not valid E-mail!",
          },
          {
            required: true,
            message: "Please input your E-mail!",
          },
        ]}
      >
        <Input placeholder="Email" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!",
          },
          {
            pattern: new RegExp("^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$"),
            message: "Password must be minimum 8 characters, at least one letter and one number",
          },
        ]}
      >
        <Input.Password placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Login
        </Button>
      </Form.Item>
    </AuthPage>
  );
};

export default MyLoginPage;

In this example, the pattern property in the rules array for the password field is used to specify a regex pattern. The regex ^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$ ensures that the password must be at least 8 characters long and contain at least one letter and one number. For more details, you can refer to the formProps documentation (https://refine.dev/docs/authentication/components/auth-page/#formprops). If you need further customization, you can always refer to the Ant Design Form documentation for more advanced validation options. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@755372117809430589> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphire•2mo ago

@kapa.ai it not work

kapa.ai•2mo ago

import React from "react";
import { AuthPage } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      formProps={{
        onFinish: (values) => {
          console.log("Success:", values);
        },
        onFinishFailed: (errorInfo) => {
          console.log("Failed:", errorInfo);
        },
      }}
    >
      <Form.Item
        name="email"
        rules={[
          {
            type: "email",
            message: "The input is not valid E-mail!",
          },
          {
            required: true,
            message: "Please input your E-mail!",
          },
        ]}
      >
        <Input placeholder="Email" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!",
          },
          {
            pattern: new RegExp("^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$"),
            message: "Password must be minimum 8 characters, at least one letter and one number",
          },
        ]}
      >
        <Input.Password placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Login
        </Button>
      </Form.Item>
    </AuthPage>
  );
};

export default MyLoginPage;

import React from "react";
import { AuthPage } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyLoginPage = () => {
  return (
    <AuthPage
      type="login"
      formProps={{
        onFinish: (values) => {
          console.log("Success:", values);
        },
        onFinishFailed: (errorInfo) => {
          console.log("Failed:", errorInfo);
        },
      }}
    >
      <Form.Item
        name="email"
        rules={[
          {
            type: "email",
            message: "The input is not valid E-mail!",
          },
          {
            required: true,
            message: "Please input your E-mail!",
          },
        ]}
      >
        <Input placeholder="Email" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!",
          },
          {
            pattern: new RegExp("^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$"),
            message: "Password must be minimum 8 characters, at least one letter and one number",
          },
        ]}
      >
        <Input.Password placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Login
        </Button>
      </Form.Item>
    </AuthPage>
  );
};

export default MyLoginPage;

kapa.ai•2mo ago

<@755372117809430589> kapa.ai is still learning and improving, please let us know how it did by reacting below