React html5 validation

**totot** · 12/11/2018, 14h26

Bonjour,

J'utilise la validation html pour valider mon champ. Je cherche à changer le message indiqué quand le champs n'est pas rempli. Sauf que cela m'indique [object : Object].

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<CustomInputValidation
                      labelText={<FormattedMessage id="LoginTemplate.email" defaultMessage="Email"/>}
                      id="email"
                      formControlProps={{
                        fullWidth: true, 
                        error:errors.email === true ? true : false, required: true,   
                        onInvalid: (e) => e.target.setCustomValidity(<FormattedMessage id="LoginTemplate.email" defaultMessage="Email"/>),
                        onInput: (e) => e.target.setCustomValidity('')
                      }}
                      inputProps={{
                        onChange:this.handleChange,
                        type: "email",
                        name:"email",
                        value:authentification.email,
                        endAdornment: (
                          <InputAdornment position="end">
                            <Email className={classes.inputIconsColor}/>
                          </InputAdornment>
                        )
                      }}
                      boolError={errors.email === true ? true : false}
                      labelError={<FormattedMessage id="LoginTemplate.email.error" defaultMessage="The email is required"/>}
                    />

**gwyohm** · 12/11/2018, 16h10

Salut,

setCustomValidity attend une String en paramètre. Tu lui passes un composant React, qui est un objet...

**totot** · 12/11/2018, 16h14

D'accord mais quelle serait la solution car là j'utilise l'internationalisation.

**gwyohm** · 12/11/2018, 16h36

La solution c'est de lire la doc...

https://github.com/yahoo/react-intl/wiki/API#injectintl
(En partant du principe que c'est bien react-intl que tu utilises...)
Tu peux passer par un HOC.
avant d'exporter ton composant qui contient ton email:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
import {injectIntl} from 'react-intl';
class LoginComponent extends React.Component {
 ...
}
 
// export default  LoginComponent
export default injectIntl(LoginComponent)

en faisant ca, tu auras dans les props de ton composant un objet intl. Tu peux alors l'utiliser dans tes méthodes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
e.target.setCustomValidity(this.props.intl.formatMessage({id:'LoginTemplate.email' defaultMessage='Email'}))

**totot** · 12/11/2018, 16h56

Merci sa a fonctionné

**totot** · 13/11/2018, 11h41

Comment je peux utiliser injectIntl dans un cas comme celui là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import Person from "@material-ui/icons/Person";
// import ContentPaste from "@material-ui/icons/ContentPaste";
import LibraryBooks from "@material-ui/icons/LibraryBooks";
import BubbleChart from "@material-ui/icons/BubbleChart";
import LocationOn from "@material-ui/icons/LocationOn";
import Notifications from "@material-ui/icons/Notifications";
import Unarchive from "@material-ui/icons/Unarchive";
// core components/views
import DashboardPage from "views/Dashboard/Dashboard.jsx";
import UserProfile from "views/UserProfile/UserProfile.jsx";
import TableList from "views/TableList/TableList.jsx";
import Typography from "views/Typography/Typography.jsx";
import Icons from "views/Icons/Icons.jsx";
import Maps from "views/Maps/Maps.jsx";
import NotificationsPage from "views/Notifications/Notifications.jsx";
import UpgradeToPro from "views/UpgradeToPro/UpgradeToPro.jsx";
 
import {injectIntl} from 'react-intl';
 
const dashboardRoutes = [
  {
    path: "/dashboard/dashboard",
    sidebarName: "Dashboard",
    navbarName: this.props.intl.formatMessage({id:'loginTemplate.email.error', defaultMessage:'Email'}),
    icon: Dashboard,
    component: DashboardPage
  },
  {
    path: "/dashboard/user",
    sidebarName: "User Profile",
    navbarName: "Profile",
    icon: Person,
    component: UserProfile
  },
  {
    path: "/dashboard/table",
    sidebarName: "Table List",
    navbarName: "Table List",
    icon: "content_paste",
    component: TableList
  },
  {
    path: "/dashboard/typography",
    sidebarName: "Typography",
    navbarName: "Typography",
    icon: LibraryBooks,
    component: Typography
  },
  {
    path: "/dashboard/icons",
    sidebarName: "Icons",
    navbarName: "Icons",
    icon: BubbleChart,
    component: Icons
  },
  {
    path: "/dashboard/maps",
    sidebarName: "Maps",
    navbarName: "Map",
    icon: LocationOn,
    component: Maps
  },
  {
    path: "/dashboard/notifications",
    sidebarName: "Notifications",
    navbarName: "Notifications",
    icon: Notifications,
    component: NotificationsPage
  },
  {
    path: "/dashboard/upgrade-to-pro",
    sidebarName: "Upgrade To PRO",
    navbarName: "Upgrade To PRO",
    icon: Unarchive,
    component: UpgradeToPro
  },
  { 
    redirect: true, 
    path: "/dashboard", 
    to: "/dashboard/dashboard", 
    navbarName: "Redirect" }
];
 
export default injectIntl(dashboardRoutes);

**gwyohm** · 13/11/2018, 12h12

dashboardRoutes n'est pas un composant, tu ne peux pas le passer à injectIntl

La solution c'est de stocker les clés (id) dans l'objet, puis de les exploiter avec un composant auquel tu auras fait l'injection:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
const dashboardRoutes = [
  {
    path: "/dashboard/dashboard",
    sidebarName: "dashboard.side",
    navbarName: {id:'loginTemplate.email.error', defaultMessage:'Email'},
    icon: Dashboard,
    component: DashboardPage
  },
 ...
]
const MonComposant = ({ ...props }) => (
// quelque par dans ton code
dashboardRoutes.map(({ navbarName}) =>
this.props.intl.formatMessage(navbarName)
);
 
export default injectIntl(MonComposant);

**totot** · 13/11/2018, 14h38

Ok sa fonctionne si je refait ma redirection comme cela : <Redirect to={"/dashboard/dashboard"}/>; dans la page de login
Car si je fais cela <Redirect to={"/dashboard"}/>;
J'ai l'erreur suivante : [React Intl] An `id` must be provided to format a message.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
  function makeBrand() {
    var name;
    props.routes.map((prop, key) => {
      if (prop.path === props.location.pathname) {
        name = props.intl.formatMessage(prop.navbarName);
      }
      return null;
    });
    return name;
  }

Mais je peux pas utiliser la redirection mise en place car sinon mon menu ne marche plus : chaque lien me redirige de nouveau vers ma page de login