JSFiddle - React, Tailwind, and code Playground

Formulaire 1

by bestmomo

HTML

<div ng-app>
  <h1>Inscription</h1>
  <form name="ajoutUtilisateur" ng-controller="controleur" ng-submit="soumission(ajoutUtilisateur.$valid)">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" placeholder="Votre nom" ng-model="user.nom" required>
    <label for="nom">Prénom :</label>
    <input type="text" id="prenom" placeholder="Votre prénom" ng-model="user.prenom" required>
    <label for="email">Email :</label>
    <input type="email" id="email" placeholder="Votre Email" ng-model="user.email" required>
    <button type="submit">Envoyer</button>
    <div ng-class="messageClass" ng-show="message">{{message}}</div>
  </form>
  <script>
    function controleur($scope) {
      $scope.message = '';
      $scope.soumission = function (valid) {
        if(valid) {
          $scope.messageClass='vert';
          $scope.message = 'Merci ' + $scope.user.nom + ' votre inscription est validée !';
        }
        else {
          $scope.messageClass='rouge';
          $scope.message = 'Désolé mais il y a des données non valides !';
        }
      };
    }
  </script>
</div>

CSS

.ng-invalid { border-color: #B94A48; }
.rouge { color: red; }
.vert { color: green; }