J'ai un formulaire de connexion avec deux champs Nom d'utilisateur et mot de passe.Ces champs sont validés.Mais maintenant je veux le changer dans le formulaire d'inscription en ajoutant plus de champs comme le mot de passe et confirmer le mot de passe et l'email maintenant confirmez le champ de mot de passe et comment valider le champ de courriel.

                 Login form


                 <!-- Modal content-->
            <div class="modal-content">
                <section id="content1">
                    <form>
                         <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal">&times;</button>

                        <h1 class="modal-title">Signin Form</h1>
                              </div>

                         <div class="modal-body">


                            <input type="text" placeholder="Username" required="" id="username" />


                            <input type="password" placeholder="Password" required="" id="password" />


                             </div>


                        <div class="modal-footer" style="padding-left:86px">



                            <input type="submit" value="Log in" style="background-color:whitesmoke" />

                            </div>
                    </form>
                    <!-- form -->
                </section>
                <!-- content -->
                <!-- container -->
            //</div>

Et j'ai ajouté ces trois fichiers.

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-1
waleed 2 août 2017 à 10:39

2 réponses

Meilleure réponse

Pour la validation des e-mails, nous pouvons utiliser l'expression regex:

function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
};

Cela sera vrai ou faux sur une adresse e-mail valide

Pour la validation du mot de passe:

function ValidatePassword(){
   var password = $("#password").val();
   var confirmPassword = $("#confirm-password").val();
   if (password != confirmPassword ) {
       return false;
   } else {
       return true;
   }
}
1
PRADEEP Kumar 2 août 2017 à 07:46

Vous devez créer de nouveaux champs pour confirmer le mot de passe et l'adresse e-mail.

<input type="password" required="" id="confirmPassword" />
<span id='message'></span>
<input type="email" required="" id="emailAddress" />
<input type="submit" value="Log in" id="submitButtonId" style="background-color:whitesmoke" />

Si vous utilisez HTML5, vous pouvez utiliser l'entrée type = "email" sinon utilisez ceci

pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"

Ensuite, en Javascript, vous pouvez valider la valeur du mot de passe et confirmer le champ du mot de passe comme:

var password = $("#password").val();
   var confirmPassword = $("#confirmPassword").val();
   if (password != confirmPassword ) {
       $('#message').html('Matching');
       $('#submitButtonId').prop('disabled', false);
   } else {
       $('#message').html('Not Matching');
       $('#submitButtonId').prop('disabled', true);
   }

Si vous souhaitez le faire avant de soumettre , vous pouvez utiliser le code suivant:

$('#password, #confirmPassword').on('keyup', function () {
  if ($('#password').val() == $('#confirmPassword').val()) {
    $('#message').html('Matching').css('color', 'green');
    $('#submitButtonId').prop('disabled', false);
  } else{ 
    $('#message').html('Not Matching').css('color', 'red');
    $('#submitButtonId').prop('disabled', true);
  }

});

1
Gurwinder Singh 3 août 2017 à 07:42