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  
    Profil pro
    Inscrit en
    juin 2013
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2013
    Messages : 1 222
    Points : 131
    Points
    131
    Par défaut 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é
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    804
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 804
    Points : 1 120
    Points
    1 120
    Par défaut
    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  
    Profil pro
    Inscrit en
    juin 2013
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2013
    Messages : 1 222
    Points : 131
    Points
    131
    Par défaut
    D'accord mais quelle serait la solution car là j'utilise l'internationalisation.

  4. #4
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    804
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 804
    Points : 1 120
    Points
    1 120
    Par défaut
    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  
    Profil pro
    Inscrit en
    juin 2013
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2013
    Messages : 1 222
    Points : 131
    Points
    131
    Par défaut
    Merci sa a fonctionné

  6. #6
    Débutant  
    Profil pro
    Inscrit en
    juin 2013
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2013
    Messages : 1 222
    Points : 131
    Points
    131
    Par défaut
    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é
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    804
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 804
    Points : 1 120
    Points
    1 120
    Par défaut
    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  
    Profil pro
    Inscrit en
    juin 2013
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2013
    Messages : 1 222
    Points : 131
    Points
    131
    Par défaut
    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  
    Profil pro
    Inscrit en
    juin 2013
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2013
    Messages : 1 222
    Points : 131
    Points
    131
    Par défaut
    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  
    Profil pro
    Inscrit en
    juin 2013
    Messages
    1 222
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2013
    Messages : 1 222
    Points : 131
    Points
    131
    Par défaut
    Je ne trouve pas comment faire l'équivalent de intl inject avec i18n

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XHTML 1.0] Eclipse JSP validation de HTML5 à XHTML
    Par arsinoe77 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 12
    Dernier message: 07/02/2013, 10h49
  2. [API HTML5] [Article] L'API HTML5 de contrainte de validation
    Par Bovino dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 04/01/2013, 18h34
  3. Réponses: 3
    Dernier message: 24/03/2012, 10h54
  4. [HTML 5] Superposition de balise UL non valide en HTML5 ?
    Par motenai dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 06/02/2011, 20h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo