2010-11-20 4 views
0

J'ai ce formulaire qui valide les champs sur soumettre via ajax (en utilisant la classe Form_Validation de Codeigniter).Remplissez plusieurs éléments avec un seul appel jQuery Ajax

<input type="text" name="field1" id="field1"> /> 
<span id="field1_error"></span> 
.... 
<input type="text" name="field2" id="field2"> /> 
<span id="field2_error"></span> 
... 
<input type="text" name="field3" id="field3"> /> 
<span id="field3_error"></span> 
<input type="submit" name="submit" id="btnPublish" /> 

Lors de la soumission, jQuery appelle la méthode de validation de CI. Quel serait le meilleur moyen de générer ces erreurs de validation avec un seul appel Ajax?

+0

Quel est l'avantage d'utiliser AJAX ici? Si je comprends bien, vous utilisez la validation côté serveur de l'ensemble du formulaire on-submit. En quoi diffère-t-il de la soumission réelle de la page et de l'affichage de la sortie de validation générée par le serveur avec le formulaire? – Krab

+0

La raison en est que j'affiche des champs supplémentaires basés sur la sélection d'une liste déroulante. Si je soumets la page normalement, ces champs sont perdus. Je crois qu'il est beaucoup plus difficile de résoudre ce problème que ce qui précède. –

Répondre

2

Peut-être que cette approche peut vous aider .. ressemble plus à un soupçon que la solution complète ...

côté serveur que vous allez faire la validation et le retour JSON (par exemple) - $ Progress est vrai/faux - en fonction des résultats de la validation et erreurs $ est un tableau (nom, translated_error/ou "")

php partielle:

$res = array(
    'progress' => $progress, 
    'errors' => $errors 
); 
$jsonReturn = json_encode($res); 

//output result 
header('Content-Type: text/html; charset=utf-8');  
echo $jsonReturn; 

jQuery partielle:

var errorFields = $([]).add(field1_error).add(field2_error).add(field3_error), 
    mainFields = $([]).add(field1).add(field2).add(field3); 

$('#btnPublish').button().click(function(event){ 

    mainFields.removeClass('ui-state-error'); 
    errorFields.val();             

    $.ajax({ 
    type: 'POST', 
    url: your_url, 
    data: $('#your_form_id').serialize(), 
     async: false, 
     success: function (returned_value){ 
      var obj = $.parseJSON(returned_value); 

      if (obj.progress==true){ 
       alert('Validation successfull'); 

      }else{ 
       $.each(obj.errors, function(index, value) { 
        if (value!=""){ //it will skip those fields with no errors 
         $('#'+index).addClass(('ui-state-error')); 
         $('#'+index+'_error').val(value); 
        } 
       }); 

      }//end return ajax 

     }//end ajax 
    });   

}); 
+0

Merci pour ça. Cela fonctionne très bien! En effet, JSON résout beaucoup de problèmes, mais je suis préoccupé par la sécurité. Depuis, le code JS est disponible pour l'utilisateur final, comment s'assurer qu'il ne peut pas être manipulé pour faire d'autres choses (demandes automatisées, demande de grands ensembles de données)? –

+1

Il existe toujours un certain type de préoccupation lorsque vous utilisez tout ce qui est publiquement disponible. Ajax (JavaScript) n'est pas une exception à cette règle, mais que vous devez vous demander: est-ce que je l'utilise correctement et que je donne beaucoup de liberté à mes utilisateurs juste pour le plaisir d'une meilleure expérience utilisateur. Et bien sûr, Internet est plein de bons exemples comment éviter certaines de vos préoccupations. Je sais que c'est une réponse générique à votre question, mais c'est tout simplement le fait. La sécurité est entre vos mains (code). Le manque est également. – trix

Questions connexes