Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JavaScript] Vérification de formulaire dynamique

Sujet résolu
    21 septembre 2019 à 19:00:12

    Salut à tou, j'aimerai savoir si c'est possible de vérifier 2 mot de passe et de désactiver le bouton d'envoi si tout n'est pas remplit ?

    Merci d'avance pour la ou les réponses

    • Partager sur Facebook
    • Partager sur Twitter
      21 septembre 2019 à 22:47:20

      oui c'est possible, il faut utiliser une regex pour les mots de passe, et inhiber le comportement par défaut de ton formulaire
      • Partager sur Facebook
      • Partager sur Twitter

      Quand on fait tout, on est bon en rien...

        21 septembre 2019 à 23:26:34

        <?php include('includes/header.php'); ?>
        
        <script>
        var app = angular.module('myApp', []);
        app.controller('validateCtrl', function($scope) {
            $scope.user = '';
            $scope.email = '';
            $scope.mdp1 = '';
            $scope.mdp2 = '';
        });
        </script>
        <br>
        <div class="container-fluid">
        	<div class="row ">
        		<div class="col-lg-4 "></div>
        
        		<div class="col-lg-4 border text-success " style="border-radius: 15px; background-color: #191919;">
              <div style=" margin-left: 15px; margin-right: 15px;">
              <h3 class="m-3 font-weight-bold font" style="text-align: center;"><u>INSCRIPTION:</u></h3>
        
        	<div ng-app= "myApp">
        		<form  ng-controller="validateCtrl" name="myForm" action="php/f-ins.php" method="POST"> 
        			<div class="form-group">
            			<label for="exampleInputEmail1">Votre pseudo:</label>
            			<input style="border-radius: 20px;" type="text" class="form-control" id="PSEUDO"  placeholder="Entrer votre pseudo:" name="user" ng-model="user" ng-minlength="3" ng-maxlength="8" required>
            			<span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
        				<span ng-show="myForm.user.$error.required">Le pseudo est requis</span>
        				<span ng-show="myForm.user.$error.minlength">Le pseudo est trop court</span>
        				<span ng-show="myForm.user.$error.maxlength">Le pseudo est trop long</span>
          			</div>
        
        			<div class="form-group">
           				<label for="exampleInputEmail1">Votre email:</label>
            			<input style="border-radius: 20px;" type="email" class="form-control" id="EMAIL"  placeholder="Entrer email:" name="email" ng-model="email" required>
            			<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
        				<span ng-show="myForm.email.$error.required">L'email est requis</span>
        				<span ng-show="myForm.email.$error.email">L'email est invalide</span>
          			</div>
        
        			<div class="form-group">
            			<label for="exampleFormControlSelect1">Votre genre:</label>
            			<select style="border-radius: 20px;" name="genre" class="form-control" id="GENRE" required>
            				<option disabled>Votre genre:</option>
              				<option>Homme</option>
              				<option>Femme</option>
              				<option>Autre</option>
            			</select>
          			</div>
        
        			<div class="form-group" >
            			<label>Votre mot de passe:</label>
            			<input style="border-radius: 20px;" type="password" class="form-control" name="mdp1" id="mdp1" placeholder="Entrer votre mot de passe:" ng-model="mdp1" ng-minlength="3" required>
            			<span style="color: red" ng-show="myForm.mdp1.$dirty && myForm.mdp1.$invalid">
        				<span ng-show="myForm.mdp1.$error.required">Le mot de passe est requis</span>
        				<span ng-show="myForm.mdp1.$error.minlength">Le mot de passe est trop court</span>
        				
          			</div>
        
                <div class="form-group">
                    <label class="control-label">Confirmer votre mot de passe:</label>
                    <div>
                        <input style="border-radius: 20px;"  type="password" class="form-control" required name="mdp2" ng-model="mdp2" placeholder="Retaper votre mot de passe:"  ng-minlength="3" 	/>
                        <span style="color: red" ng-show="myForm.mdp2.$dirty && myForm.mdp2.$invalid">
                        <span ng-show="myForm.mdp2.$error.required">Le mot de passe est requis</span>
        				<span ng-show="myForm.mdp2.$error.minlength">Le mot de passe est trop court</span>
                    </div>
        
                </div>
                <br>
            <div style="text-align: center;">
                <div style="display: inline-block;" class="g-recaptcha" data-sitekey="6LeQLrQUAAAAALE6kOwH7koMcWeIaAEoQ7UmbBhf"></div>
            </div>
                <br>
        
        	   	<div style="margin-bottom: 30px;">
        			<button type="submit"  disabled="true" name="submit-ins" class="btn btn-success" style="border-radius: 20px;  width: 190px;" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
        myForm.email.$dirty && myForm.email.$invalid ||  myForm.mdp1.$dirty && myForm.mdp1.$invalid ||  myForm.mdp2.$dirty && myForm.mdp2.$invalid">S'Inscrire</button>
        			<button type="reset" ng-click="reset()" class="btn btn-outline-success ml-1" style="border-radius: 20px;  width: 185px;">Reset</button>
            	</div>
        		</form>
        	</div>
              </div>
        		</div>
        
        		<div class="col-lg-4"></div>
        	</div>
        </div>
        <br>
        <?php include('includes/footer.php'); ?>
        Donc j'ai fait avec angularjs mais je n'arrive pas avec le mots de passes similaires tout le reste fonctionne (si rien, message pour dire que c'est requis ou mot de passe trop petit). Par contre si le message apparait le bouton se désactive mais j'aimerai désactiver par défault et si c'est bien remplit le bouton se réactive, comment faire ?
        • Partager sur Facebook
        • Partager sur Twitter
          22 septembre 2019 à 20:18:45

          ok alors pour te mettre sur la voie je vais te donner un exemple.

          Dans un 1er temps, il serai bien d'ajouter un id a ton formulaire par exemple myForm comme le name

          Ensuite, il te faut une variable test qui retournera true si les tests sont ok et false si ils ne le sont pas.

          En js ça donne ça:

          var test = false;
          var myForm = document.getElementById('myForm');
          
          function testForm()
          {
              if(toutmestestsontok)
              {
                  test = true;
              }
              else
              {
                  test = false;
              }
              return test;
          }
          
          myForm.onsubmit = function()
          {
              return testForm(); // si testForm() retourne false alors le formulaire ne sera pas envoyé 
          }

          Voila, bien sur il ne faut pas oublier de faire tout ces contrôles en php

          • Partager sur Facebook
          • Partager sur Twitter

          Quand on fait tout, on est bon en rien...

            4 octobre 2019 à 23:12:29

            Désolé du retard, merci tu viens de me guider, j'avais pas pensé à faire cela, merci
            • Partager sur Facebook
            • Partager sur Twitter

            [JavaScript] Vérification de formulaire dynamique

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown