2012-10-14 2 views
0

Possible en double:
AJAX Form Submission in jQuery Mobiledésactiver l'action bouton forme mobile jquery

J'ai une forme et j'utilise jQuery pour vérifier et valider le formulaire, de sorte que, si la forme est vide , il ne soumettra pas le formulaire et alertera simplement "Veuillez remplir tous les champs".

function doShowError(eForm, sField, iInd, sError) { 
    var $Field = $("[name='" + sField + "']", eForm); // single (system) field 
    if(!$Field.length) // couple field 
     $Field = $("[name='" + sField + '[' + iInd + ']' + "']", eForm); 
    if(!$Field.length) // couple multi-select 
     $Field = $("[name='" + sField + '[' + iInd + '][]' + "']", eForm); 
    if(!$Field.length) // couple range (two fields) 
     $Field = $("[name='" + sField + '[' + iInd + '][0]' + "'],[name='" + sField + '[' + iInd + '][1]' + "']", eForm); 

    //alert(sField + ' ' + $Field.length); 

    $Field.parents('div:first').addClass('error'); 

    $Field 
    .parents('div:first') 
     .addClass('error') 
     .children('img.warn') 
      .attr('float_info', sError) 
      //.show() 
      ; 
} 

En ce moment, le problème est que, chaque fois que je clique sur le bouton Envoyer, je redirigés vers la page (qui est censé être le panneau de l'utilisateur) avec juste un texte disant:

non défini

Comment puis-je désactiver ce que le bouton jQuery faire par défaut?

Edit: Mes événement se déclenche et le message montre, mais je suis toujours redirigés vers l'URL définie dans l'attribut de la forme action.

+0

Salut! Où appelez-vous votre fonction 'doShowError'? Pourriez-vous fournir plus de code? – Littm

Répondre

0

Dans votre fonction de valider les champs de votre formulaire (qui devrait être appelé sur l'événement submit), vous devez revenir true dans le cas où la validation est réussie, et false autrement. De cette manière, vous pouvez empêcher le formulaire de naviguer vers l'URL définie dans l'attribut action lorsque la validation échoue.

Vous pouvez essayer quelque chose comme ceci:

$(function() { 
    $("#your_form").submit(function() { 
     // Define `sField` 
     var sField = // SOMETHING 

     // Define `iInd` 
     var iInd = // SOMETHING 

     // Define `sError` 
     var sError = // SOMETHING 

     return doShowError($(this), sField, iInd, sError); 
    }); 
}); 

#your_form est l'ID de votre formulaire et doShowError() est la fonction de vérification de l'entrée de votre formulaire, retour true si tous les champs sont ok, et else dans le sens opposé Cas.

Dans ce cas, vous devrez peut-être modifier votre fonction doShowError afin qu'elle renvoie true ou false comme décrit ci-dessus. Vous pourriez le changer à quelque chose comme ceci:

function doShowError(eForm, sField, iInd, sError) { 

    // `haserror`: boolean output which will equal `true` 
    // if all the fields are correct, and `else` otherwise 
    var haserror = true; 

    var $Field = $("[name='" + sField + "']", eForm); // single (system) field 
    if(!$Field.length) { // couple field 
     $Field = $("[name='" + sField + '[' + iInd + ']' + "']", eForm); 
     haserror = false; 
    } 
    if(!$Field.length) { // couple multi-select 
     $Field = $("[name='" + sField + '[' + iInd + '][]' + "']", eForm); 
     haserror = false; 
    } 
    if(!$Field.length) { // couple range (two fields) 
     $Field = $("[name='" + sField + '[' + iInd + '][0]' + "'],[name='" + sField + '[' + iInd + '][1]' + "']", eForm); 
     haserror = false; 
    } 

    //alert(sField + ' ' + $Field.length); 

    $Field.parents('div:first').addClass('error'); 

    $Field.parents('div:first') 
     .addClass('error') 
     .children('img.warn') 
      .attr('float_info', sError) 
      //.show() 
      ; 

    return haserror; 
} 
+0

merci pour votre réponse, mais toujours face au même problème .. ce que mon code devrait faire est de rester sur la même page et juste alerter l'erreur, mais maintenant j'arrive à la page d'action, non seulement il mais il a seulement 'undefined ' –