Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

React html5 validation


Sujet :

React

  1. #1
    Débutant  
    React html5 validation
    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"/>}
                        />

  2. #2
    Membre éprouvé
    Salut,

    setCustomValidity attend une String en paramètre. Tu lui passes un composant React, qui est un objet...
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Débutant  
    D'accord mais quelle serait la solution car là j'utilise l'internationalisation.

  4. #4
    Membre éprouvé
    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'}))
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  5. #5
    Débutant  
    Merci sa a fonctionné

  6. #6
    Débutant  
    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);

  7. #7
    Membre éprouvé
    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);
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  8. #8
    Débutant  
    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

  9. #9
    Débutant  
    J'ai trouvé : Il fallait que je rajoute un test pour savoir si c'était pas une propriété de type Redirect.

  10. #10
    Débutant  
    Je ne trouve pas comment faire l'équivalent de intl inject avec i18n

###raw>template_hook.ano_emploi###