demande jquery: le passage de messages sans nouvelle pageload

Question

S'il vous plaît pardonner les maladresses de cette question, honnêtement, je ne sais pas comment formuler une meilleure requête ...

La situation:

J'ai une base formulaire de contact dans une page xhtml/php que je suis en train de mettre à jour. J'ai récemment ajouté un nouveau plugin jquery indépendant sur cette page, donc je voudrais utiliser la fonctionnalité jquery pour aider avec une simple validation de formulaire si possible. La validation est déjà effectuée via PHP dans un fichier séparé soumis par le formulaire de contact. Ce que je veux, c'est que le message de validation PHP soit renvoyé à la page principale (formulaire de contact) sans un nouveau pageload. J'ai vu cela fait au moyen de jquery quelque part, mais je n'arrive pas à le retrouver ici ou via google. Quelqu'un peut-il aider?

Je cherche vraiment la rapidité et la simplicité ici, et au premier coup d'œil, le plugin de validation jquery est de taille dans sa taille et de la complexité, donc je suis peu disposé à se lancer dans cette voie particulière ...

Answer 1

Ce que vous cherchez est connu sous le nom d'AJAX, et il n'y a rien de difficile, surtout avec jQuery! Le problème avec l'envoi des données à PHP pour valider, c'est que ça va immédiatement nixer votre besoin de "vitesse" - le formulaire devrait être bloqué pendant que Javascript fait une demande au serveur pour voir si tout va bien. Pour cette raison, il est de pratique courante que la validation soit effectuée au côté serveur et côté client. Note Je dis les deux, comme vous devriez toujours valider les données sur le serveur.

Dans cet esprit, commençons! Je vais montrer comment valider un formulaire sans utiliser le plug-in de validation - pour les grands projets, vous voudrez peut-être considérer, mais il est assez facile sans elle:

<form id='myform' action='whatever.php' method='POST'> 
First Name: <input type='text' name='first_name' class='required'><br> 
Last Name: <input type='text' name='last_name'><br> 
Email: <input type='text' name='email' class='required'><br> 
Zip: <input type='text' name='zip'><br> 
</form> 

Comme vous pouvez le voir, nous avons d'abord nom et email avec une classe de besoin, afin que nous puissions faire ceci:

$(function() { // wait for the document to be loaded 
    $('#myform').submit(function() { 
     var valid = true; // assume everything is okay 
     // loop through each required field in this form 
     $('input.required', this).each(function() { 
      // if the field is empty, mark valid as false 
      // and add an error class 
      if($.trim($(this).val()) == '') { 
       valid = false; 
       $(this).addClass('error_input'); 
      } 
     }); 

     // additional validation for email, zip, perhaps 

     return valid; // if valid is true, continue form submission 
    }); 
}); 

Le plugin de validation fait tout cela un peu plus propre et plus propre à faire, mais si vous avez juste besoin de faire une forme rapide il n'y a rien de mal avec l'approche ci-dessus. Ca craint parce que vous devez avoir vos règles de validation à deux endroits, mais à part d'exécuter Javascript sur le serveur ou d'appeler le serveur pour les données, il n'y a pas d'alternative si vous voulez dire rapidement à vos utilisateurs que quelque chose ne va pas.

Espérons que cela aide.

EDIT: Il semble que j'ai mal compris votre question. Si vous voulez transmettre les données de formulaire à un script PHP, faites valider les valeurs et renvoient le succès ou l'erreur à la page sans charge, vous feriez quelque chose comme ceci:

$('#myform').submit(function() { 
    // allow submit if we've validated this already 
    if($(this).data('done')) return true; 
    var data = $(this).serialize(); // serialize the form data 
    // you could get the two variables below from the actual form (DRY) 
    // with $(this).attr('action'); and $(this).attr('method'); but I am 
    // not sure if that is what you want... 
    var action = 'validate.php'; // what script will process this 
    var method = 'POST'; // type of request to make 
    $.ajax({ 
     type: method, 
     url: action, 
     data: data, 
     dataType: 'json', 
     success: function(d) { 
      if(d.code == 'success') { 
       // everything went alright, submit 
       $(this).data('done', true).submit(); 
      } else { 
       alert('something is wrong!'); 
      } 
     } 
    }); 
    return false; // don't submit until we hear back from server 
}); 

Et puis tout votre PHP script doit quelque chose comme cela est de retour, en utilisant json_encode, pour indiquer si tout va bien ou non:

// verify everything... 
// data will be in $_POST just like a normal request 
if($everythingOK) { 
    $code = 'success'; 
} else { 
    $code = 'error'; 
} 
print json_encode(array('code' => $code)); 
exit; 

Je ne l'ai pas testé le Javascript ci-dessus, mais je suis sûr qu'il devrait être à peu près juste. J'espère que ce aide. :)