React

HTML

<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"></script>
<div id="root"></div>

React

const {
	Button,
  Dialog,
  DialogContent,
  TextField,
  DialogActions,
} = MaterialUI;

const {
  useState,
} = React;

function App() {
  const [dialogShown, setDialogShown] = useState(false);
  
  return (
      <div>
        <button onClick={() => setDialogShown(true)}>Click me</button>
        <UserInfoDialog open={dialogShown} onClose={() => setDialogShown(false)}/>
      </div>
    );
}

function UserInfoDialog(props) {
    const [nameErrorMsg, setNameErrorMsg] = useState(null);
    const [emailErrorMsg, setEmailErrorMsg] = useState(null);
    const [phoneErrorMsg, setPhoneErrorMsg] = useState(null);

    var result = {};

    const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
    const phoneRegex = /^(\+\d{1,2}\s?)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/g;

    const onSubmit = () => {
        console.log("result:", result);

        if (!result.name) {
            setNameErrorMsg("Name is required");
            return;
        }
        else {
            setNameErrorMsg(null);
        }

        if (!result.email && !result.phone) {
            setEmailErrorMsg("Either phone or email is required");
            setPhoneErrorMsg("Either phone or email is required");
            return;
        }
        else if (result.email && !emailRegex.test(result.email)) {
            setEmailErrorMsg("Please enter a valid email address");
            return;
        }
        else if (result.phone && !phoneRegex.test(result.phone)) {
            setPhoneErrorMsg("Please enter a valid phone number");
            return;
        }
        else {
            setEmailErrorMsg(null);
            setPhoneErrorMsg(null);
        }


        // Todo: need onsubmit (and show a toast?)
        props.onClose();
    };

    return (
        <Dialog open={props.open} onClose={() => props.onClose()}>
            <DialogContent>
                <h4>Please fill out the following information so we can get you connected</h4>
                <TextField autoFocus fullWidth...