web-dev-qa-db-fra.com

Puis-je vérifier la confirmation du mot de passe dans bootstrap 4 avec les options de validation par défaut?

J'ai lu https://getbootstrap.com/docs/4.0/components/forms/#validation . Après avoir lu, je suppose qu'il est possible de vérifier le mot de passe de confirmation sur le site client en utilisant bootstrap 4 options par défaut. Et, comme je suis nouveau dans le développement Web, je ne peux pas trouver la solution.

Si c'est possible alors, comment?

Mon modal d'inscription est

<li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signUp">Sign Up</button></li>
                    <li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signIn" style="margin-left:10px">Sign In</button></li>

                    <!-- Modal content-->




                    <div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <label for="email" class="col-form-label">Email address:</label>
                                            <input type="email" class="form-control" id="email" name="email">
                                        </div>
                                        <div class="form-group">
                                            <label for="pwd" class="col-form-label">Password:</label>
                                            <input type="password" class="form-control" id="pwd" name="password">
                                        </div>
                                        <div class="form-group">
                                            <label for="pwd" class="col-form-label">Confirm Password:</label>
                                            <input type="password" class="form-control" id="pwd" name="password">
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">Sign Up</button>

                                </div>
                            </div>
                        </div>
                    </div>

Pour plus de détails sur le code, voir this

Je souhaite soumettre l'e-mail et le mot de passe au serveur lorsque les deux mots de passe sont égaux. Sinon, affichez un message d'alerte.

password-confirmation
6
user9644880

Bootstrap 4 utilisant la validation des contraintes comme suit Le formulaire suivant comporte deux champs obligatoires, un pour une adresse e-mail et un pour un mot de passe. Il possède également un troisième champ qui n'est considéré comme valide que si l'utilisateur tape le même mot de passe dans le champ de mot de passe et ce troisième champ.

<h1>Create new account</h1>
<form action="/newaccount" method=post
      oninput='up2.setCustomValidity(up2.value != up.value ? "Passwords do not match." : "")'>
  <p>
  <label for="username">E-mail address:</label>
  <input id="username" type=email required name=un>
  <p>
  <label for="password1">Password:</label>
  <input id="password1" type=password required name=up>
  <p>
  <label for="password2">Confirm password:</label>
  <input id="password2" type=password name=up2>
  <p>
  <input type=submit value="Create account">
</form>

pour plus de détails, vérifiez: https://www.w3.org/TR/html5/sec-forms.html#sec-constraint-validation

18
Mohammed Abdellatif