Créer une page pour indiquer au navigateur de ne pas mettre en cache / conserver les valeurs d'entrée

La plupart des navigateurs mettent en cache les valeurs d'entrée des formulaires. Ainsi, lorsque l'utilisateur actualise une page, les entrées ont les mêmes valeurs.

Voici mon problème. Lorsqu'un utilisateur clique sur Enregistrer , le serveur valide les données POSTÉES (par exemple les produits vérifiés) et, si elles ne sont pas valides, les renvoie au navigateur. Cependant, comme indiqué ci-dessus, même si le serveur efface la sélection pour certaines valeurs, elles peuvent toujours être sélectionnées à cause du cache du navigateur!

Mes données ont des cases à cocher invisibles (jusqu'à ce que l'élément parent soit sélectionné), de sorte que l'utilisateur peut même ne pas savoir qu'une valeur précédente est toujours sélectionnée, jusqu'à ce qu'il clique à nouveau sur Enregistrer et reçoive un message d'erreur - même si l'utilisateur pense que ce n'est pas le cas. Ce qui est irritant.

Cela peut être résolu en faisant Ctrl+ F5, mais ce n'est même pas une solution. Existe-t-il un moyen automatique / programmatique de dire au navigateur de ne pas mettre en cache les données d'entrée de formulaire sur un formulaire / une page?

Définissez-vous explicitement les valeurs comme vides? Par exemple:

<input type="text" name="textfield" value="">

Cela devrait empêcher les navigateurs de mettre des données là où elles ne le devraient pas. Vous pouvez également ajouter l' autocompleteattribut à la balise form:

<form autocomplete="off" ...></form>

À partir d' une référence de débordement de pile

Cela ne fonctionnait pas avec value = "" si le navigateur enregistre déjà la valeur, vous devez donc l'ajouter.

Pour une balise d'entrée, vous pouvez définir l'attribut autocomplete:

<input type="text" autocomplete="off" />

Vous pouvez également utiliser la saisie semi-automatique pour un formulaire.

Une autre approche consisterait à réinitialiser le formulaire en utilisant JavaScript juste après le formulaire dans le HTML:

<form id="myForm">
  <input type="text" value="" name="myTextInput" />
</form>

<script type="text/javascript">
  document.getElementById("myForm").reset();
</script>

Fondamentalement, il existe deux façons de vider le cache:

<form autocomplete="off"></form>

ou

$('#Textfiledid').attr('autocomplete', 'off');

Cela a fonctionné pour moi dans les nouveaux navigateurs:

autocomplete="new-password"