jquery de validation: appel ajax et fermer le formulaire modal bootstrap après tout le formulaire valide

Je suis en utilisant Bootstrap mise en page et le Plugin jQuery Validation. Je clique sur un bouton, un modal avec le formulaire s'ouvre. Les entrées de l'utilisateur des données et améliore jusqu'à ce que tout est correct. Quand il la soumet, il convient de faire ajax appel et fermer le formulaire modal (mais si la validation échoue, il ne devrait pas être l'ajax et non modale de clôture). Ci-dessous mon code:

appel ajax

$('#outcomeFormDialog form').on( "submit", function( event ) {
    var form = $(this);
    $.ajax({
        type: form.attr('method'),
        url: "../php/client/json.php",
        data: form.serialize(),
        success: function(data, status) {
            $(this).modal('hide');
        }
    });

    event.preventDefault();
});

actuel code de validation:

 $('#outcomeFormDialog form').validate(
 {
  rules: {
    amount: {
      money: true,
      required: true
    },
    comment: {
      required: false
    }
  },
  highlight: function(element) {
    $(element).closest('.control-group')
    .removeClass('success').addClass('error');
  },
  success: function(element) {
    element
    .addClass('valid').closest('.control-group')
    .removeClass('error').addClass('success');
  }
 });

Que j'ai compris, jquery validation du success correspond à chaque élément de formulaire plutôt que de l'ensemble du formulaire, afin de vérifier la totalité du formulaire de validation devrait être fait d'une autre façon.

C'est mon formulaire (moustache):

<div id="outcomeFormDialog" class="modal hide fade" role="dialog">
    <form class="form-horizontal well" data-async data-target="#outcomeFormDialog" method="POST">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3 id="myModalLabel">Add outcome</h3>
        </div>
        <div class="modal-body">
            <fieldset>
                <input name="type" type="hidden" value="add_outcome" />
                <div class="control-group">
                    <label class="control-label" for="amount">Amount</label>
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on">{{ currency }}</span>
                            <input type="text" name="amount" class="input-xlarge" placeholder="00.01" />
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="comment">Comment</label>
                    <div class="controls">
                        <input type="text" name="comment" class="input-xlarge" placeholder="Comment here..." />
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save outcome</button>
        </div>
    </form>
</div>

OriginalL'auteur ducin | 2013-03-30

  1. 9

    Vous avez quelques problèmes courants et les idées fausses au sujet de ce plugin:

    • Vous n'avez pas besoin d'un submit gestionnaire. Le click cas de la submit bouton est automatiquement capturée et traitée par ce plugin.

    • Selon les docs, vous êtes censé mettre votre ajax dans le plugin submitHandler option de rappel.

    submitHandler: Rappel par Défaut: par défaut (native) soumettre le formulaire

    Rappel pour la manipulation du réel soumettre le formulaire
    est valide. Obtient le formulaire comme seul argument. Remplace la valeur par défaut
    soumettre. Le bon endroit pour soumettre un formulaire via Ajax après il
    validée.

    En supposant que votre ajax est correctement écrit, ré-organiser votre code en quelque chose de plus comme ceci:

    $(document).ready(function () {

    $('#outcomeFormDialog form').validate({  //initialize plugin
        rules: {
            amount: {
                //money: true, //<-- no such rule
                required: true
            },
            comment: {
                required: false //superfluous; "false" same as leaving this rule out.
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group')
                .removeClass('success').addClass('error');
        },
        success: function (element) {
            element.addClass('valid').closest('.control-group')
                .removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            //form validates so do the ajax
            $.ajax({
                type: $(form).attr('method'),
                url: "../php/client/json.php",
                data: $(form).serialize(),
                success: function (data, status) {
                    //ajax done
                    //do whatever & close the modal
                    $(this).modal('hide');
                }
            });
            return false; //ajax used, block the normal submit
        }
    });

});

    De travail de DÉMONSTRATION: http://jsfiddle.net/duAkn/

    OriginalL'auteur Sparky