Jquery valider submitHandler n'est pas appelé

J'ai un formulaire avec deux boutons

a) Test - cliquez sur le bouton, une fonction javascript est appelée pour vérifier quelques informations d'identification.

b) Créer - cliquez sur le bouton, une fonction javascript est appelé à enregistrer le formulaire.
@Messages("playauthenticate.projet.créer")

J'ai une balise form autour de ces deux boutons submit, sans action.

nom, description, touches accessKey et secretKey sont les quatre champs du formulaire.

en cliquant sur le bouton créer, je veux l'exécuter jquery de validation puis soumettez le formulaire, mais le jquery de validation submitHandler n'est pas appelé dans la fonction javascript et il n'y a pas d'erreurs dans la Console d'Erreur.

Quand je clique sur le bouton créer, créer une alerte est affichée et puis la forme se réinitialise et je suis capable de voir tous les paramètres entrés dans l'URL.

$("create").click(function() {
alert("create ");
$('#projectForm').validate( { 
rules: {
name: {
minlength: 6,
required: true
},
description: {
required: true,
description: true
},
accessKey: {
minlength: 10,
required: true
},
secretKey: {
minlength: 15,
required: true
}
},
focusCleanup: false,
wrapper: 'div',
errorElement: 'span',
highlight: function(element) {
$(element).parents ('.control-group').removeClass ('success').addClass('error');
},
success: function(element) {
$(element).parents ('.control-group').removeClass ('error').addClass('success');
$(element).parents ('.controls:not(:has(.clean))').find ('div:last').before ('<div class="clean"></div>');
},
errorPlacement: function(error, element) {
error.appendTo(element.parents ('.controls'));
},
submitHandler: function() {
alert("hello");
var name = $('#name').val();
var description = $('#description').val();
var accessKey = $('#accessKey').val();
var secretKey = $('#secretKey').val();
var dataString = 'name='+ name + '&description=' + description + '&accessKey=' + accessKey+ '&secretKey=' + secretKey;
//alert(dataString);
$.ajax({
type: "POST",
url: "/demo/save",
data: dataString,
success: function(data) {
$('#result').html("<h2>demo created successfully!</h2>");
},
error: function(data) {
$("#result").html("<h2>Error!</h2>");
}
}) 
}
});
});

JSfiddle - http://jsfiddle.net/NJxh5/3/
Merci

JSFiddle veuillez
veuillez trouver le jsfiddle lien ici : jsfiddle.net/NJxh5/3

OriginalL'auteur Santhosh S | 2013-05-17

  1. 5

    .validate() est la méthode pour initialisation le plugin. Ce n'est pas une méthode de test de l'écran. Le test est automatique.

    Par conséquent, se débarrasser de la click gestionnaire. L'événement click est capturée automatiquement par le plugin. Si le formulaire est valide, le submitHandler le feu.

    Sinon, vous le faites correctement en plaçant votre ajax à l'intérieur de la submitHandler de rappel.

    $(document).ready(function () {
$('#projectForm').validate({ //initialize the plugin
//rules & options
submitHandler: function(form) {
//ajax method
}
});
});

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

    Avec deux boutons différents et des actions:

    HTML:

    <form id="projectForm">
....
<input type="button" class="button" value="TEST" id="test" />
<input type="button" class="button" value="Create" id="create" />
</form>

    jQuery:

    $(document).ready(function () {
$('.button').each(function () {
$(this).on('click', function () {
var action;
if ($(this).attr('id') == "test") {
action = 'test.php';
} else {
action = 'create.php';
}
$('#projectForm').submit();
});
});
$('#projectForm').validate({ //initialize the plugin
//rules & options
submitHandler: function(form) {
//ajax method
$.ajax({
url: action, //determined from click handler above
//ajax options
});      
}
});
});
    J'ai deux boutons submit de mon formulaire, d'expérimenter et de créer. Le Test doit appeler une méthode séparée et Créer doit créer une méthode JS , ces deux effectuer des fonctionnalités. J'ai donc les gestionnaires de clic.
    Je comprends. Mais .validate() ne peut pas être utilisé à l'intérieur d'un click gestionnaire. pas de la méthode d'essai de la forme, afin de l'appeler à partir d'un autre gestionnaire de clic ne fait rien. validate() est de savoir comment vous initialiser le plug-in sur la forme. Après l'initialisation, les appels suivants à .validate() sont vides de sens.
    Voir mon autre réponse ici pour apprendre comment faire quelque chose comme vous décrivez: stackoverflow.com/a/15228546/594235

    OriginalL'auteur Sparky