web-dev-qa-db-fra.com

Valider le texte saisi en mode bootstrap

Je veux valider un formulaire dans un modal bootstrap sans utiliser de framework. C'est en fait un simple modal avec seulement un texte d'entrée et deux boutons "Fermer" et "Envoyer". L’utilisateur doit taper son nom dans la zone de saisie et cliquer sur envoyer. Le formulaire est envoyé avec la méthode post.

Ce que je veux faire, c'est que si l'utilisateur n'entre rien dans la zone de saisie et clique sur le bouton "Envoyer", la zone de saisie doit être entourée d'une bordure rouge au lieu de la bordure bleue par défaut. Voici le code de mon modal:

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!--form-->

            <form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">My modal</h4>
                </div>
                <div class="modal-body">
                    <p>
                        Please enter your name:
                    </p>
                    <br/>

                    <div class="form-group">

                        <div class="col-lg-12">
                            <label class="control-label" for="firstname">Name</label>
                            <input type="text" class="form-control required" id="firstname" name="firstname">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="myFormSubmit" class="btn btn-primary">Send</button>
                </div>
            </form>
        </div>
    </div>
</div>

J'ai essayé d'utiliser javascript pour changer la classe du texte d'entrée en has-error mais cela ne produit pas le contour rouge. Lorsque je clique sur envoyer, il envoie la valeur vide par la méthode post au lieu de Voici mon code javascript:

    <script type="text/javascript">
        $('#myForm').validate({
            rules: {
                name: {
                    minlength: 1,
                    required: true
                },
            },
            highlight: function (element) {
                $('#firstname').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                $('#firstname').removeClass('has-error').addClass('has-success');
            }
        });
    </script>

J'ai l'impression de mélanger beaucoup de choses ici. Je suis encore nouveau pour bootstrap et javascript. Comment puis-je obtenir le contour rouge souhaité? Merci.

Edit: Valider la fonction:

function validate() {
    var x = document.forms["myForm"]["firstname"].value;
    if (x == null || x == "") {
        return false;
    }
}
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
5
mkab

Vous devez modifier les classes CSS de input parent élément div.form-group, pas la input elle-même :

La HTML après le clic sur le bouton de soumission devrait ressembler à ceci:

<div class="form-group has-error">
   <div class="col-lg-12">
      <label class="control-label" for="firstname">Name</label>
      <input type="text" class="form-control required" id="firstname" name="firstname">
    </div>
</div>

Pour ce faire, modifiez votre code JavaScript en ceci:

<script type="text/javascript">
  $('#myForm').on('submit', function(e) {
    var firstName = $('#firstname');

    // Check if there is an entered value
    if(!firstName.val()) {
      // Add errors highlight
      firstName.closest('.form-group').removeClass('has-success').addClass('has-error');

      // Stop submission of the form
      e.preventDefault();
    } else {
      // Remove the errors highlight
      firstName.closest('.form-group').removeClass('has-error').addClass('has-success');
    }
  });
</script>
11
Plamen Nikolov

c'est très facile 

appliquez simplement la classe .has-error à div par la fonction javascript

<div class="form-group has-error">
    <div class="row">

        <label class="col-xs-2 col-sm-2 control-label">city:</label>

        <div class="col-xs-3 col-sm-3 formGroups"
            id="city_form1">
            <form:input name="city" class="form-control"
                placeholder="City" data-toggle="tooltip"
                data-placement="bottom" title="City" maxlength="15" />

        </div>
    </div>
</div>
1
Minesh

div dans la sangle de démarrage ...

<div class="form-group">
    <div class="row">

        <label class="col-xs-2 col-sm-2 control-label">city:</label>

        <div class="col-xs-3 col-sm-3 formGroups"
            id="city_form1">
            <form:input name="city" class="form-control"
                placeholder="City" data-toggle="tooltip"
                data-placement="bottom" title="City" maxlength="15" />

            <small class="help-block col-sm-offset-0 col-sm-9"
                style="display: none;">city must require</small>
        </div>
    </div>
</div>

comme vous le voyez il y a .help-block is display: none maintenant vous écrivez la fonction javascript et vérifiez la validation et si la validation est réussie, faites-la afficher: block 

profiter avec la sangle de démarrage :)

1
Minesh

Il suffit d'utiliser requis dans le champ de saisie comme ceci

<input type="text" class="form-control required" id="firstname" name="firstname" required/>
0
stephen carvalho