2010-11-06 5 views
1

Tentative de validation sur un formulaire sans balise <form>.jquery .submit()

Sa structure de plugin cms, qui utilise ajax, ne sait pas pourquoi les entrées ne sont pas enveloppées avec <form></form>.

Html:

<div class="feedback"> 
    <input id="name" type="text" name="ajax-name" value="Your name" /> 
    <input id="mail" type="text" name="ajax-mail" value="Your e-mail" /> 
    <button type="submit" id="done">Send</button> 
</div> 

JS:

$(".feedback #done").click(function() { 
    var flag = true; 
    if (!$("#name").val()){ 
     $("#name").addClass('error'); 
     flag = false; 
    } 
    if (flag == true) 
     $(".feedback").submit(); 
}); 

Ce code ne fonctionne pas.

Comment effectuer une validation sur le formulaire, sans balise <form>?

Ajax ne connaît pas cette validation.

Merci.

Répondre

2

Plutôt que

if (flag == true) 
    $(".feedback").submit(); 

do

return flag; 

Vous ne pouvez pas soumettre sans <form>, mais vous pouvez empêcher ou permettre même de compléter le clic(). Voici le code complet:

$(".feedback #done").click(function() { 
    var flag = true; 
    if (!$("#name").val()){ 
     $("#name").addClass('error'); 
     flag = false; 
    } 

    //return the value of flag instead of working with submit() 
    return flag; 
}); 

Si un événement click renvoie false, cela devrait empêcher le clic d'aller plus loin. Votre variable de drapeau sera vraie ou fausse, selon comment la validation fonctionne, de sorte que déterminera si le processus avance ou pas.

+0

Désolé, je ne comprends pas. S'il vous plaît donner une réponse plus détaillée. – James

+0

Est-ce plus clair? Je l'espère, c'est tout ce que j'ai eu :) –

+0

ok, maintenant c'est clair. Merci! – James

0

une autre façon d'obtenir l'emploi fait, envelopper tous les nœuds enfants de .feedback avec une étiquette <form > puis effectuer .submit() sur <form id="someid">

$(function() { 
    $('.feedback').children().wrapAll('<form id="form" />'); 
    $('.feedback #done').click(function() { 
     var flag = true; 
     if (!$("#name").val()) { 
      $("#name").addClass('error'); 
      flag = false; 
     } 
     if (flag) { 
      $("#form").submit(); 
      return false; 
     } 
    }); 
}); 
0

@EDIT donc j'ai lu la question et même si il est vieux ce semble toujours pertinent ...

Il suffit d'étendre le bouton submit avec .change() ou .bind() ou .on() si vous utilisez jQuery 1.7. e.preventDefault() peut fonctionner avec le gestionnaire ajax? chaîne la Razzle Dazzle fonction unbind, comme ceci:

var some_flag_bool = false; 
$('#done').click(function (e) { 
    e.preventDefault(); 
    some_flag_bool = true; 
    $(this).unbind('#done').submit(); 
    //return might be considered optional 
    return this.some_flag_bool; 
}); 

ou quelque chose comme ça dans jQuery 1.7 pour essayer des choses PRÉCOCE:

function validation() { if (!foo) { throw new Error("oh noz!"); } 
$('body').on('change', 'input', function() { validation(); }); 

pourrait $ .attr ('handicapé', 'handicapé') le bouton lorsque le document est prêt, puis $ .removeAttr ('disabled') dans une méthode de validation

mais si c'était moi, j'appellerais simplement des méthodes de validation de mon gestionnaire ajax ou j'utiliserais le plugin jQuery.validation.

Questions connexes