jQuery ajout requis pour les champs de saisie

171

J'ai cherché des moyens pour que jQuery écrive automatiquement en utilisant la validation html5 dans tous mes champs de saisie mais j'ai du mal à lui dire où l'écrire.

Je veux prendre ça

 <input type="text" name="first_name" value="" id="freeform_first_name"
 maxlength="150">

et faites - le ajouter automatiquement requis avant la balise de fermeture

 <input type="text" name="first_name" value="" id="freeform_first_name"
 maxlength="150" required>

Je pensais que je pourrais faire quelque chose du genre

$("input").attr("required", "true");

Mais ça ne marche pas. Toute aide est grandement appréciée.

javascript jquery validation

— Miura-shi
source

2

N'est-il pas emballé dans dom prêt? $(function(){....});

— PSL

J'utilise ce jsfiddle.net/japaneselanguagefriend/LEZ4r

— Miura-shi

si 'input' est un id, la jquery n'a pas le # dans le sélecteur ici.

— John Meyer

@JohnMeyer "input" est un sélecteur de balises. Non # nécessaire si vous ciblez les tags d'entrée

— Spartacus

420

$("input").prop('required',true);

DEMO FIDDLE

— Inconnue
source

1

Hmm, a ajouté un bouton d'envoi mais toujours pas de validation ou d'ajout de l'attribut requis dans les champs de saisie. jsfiddle.net/japaneselanguagefriend/LEZ4r

— Miura-shi

1

@JohnMeyer "input" est un sélecteur de balises

— morefromalan

1

a une TypeError: element.prop is not a functionerreur

— davideghz

@ Miura-shi Il vous manque les <form></form>balises dans votre jsFiddle

— JESTech

Si cela peut aider quelqu'un: cela ne fonctionnait pas pour moi au début parce que j'appelais .prop('required',true)sur l'entrée avant de l' appeler .css("display", "block").

— electrotype

52

Vous pouvez le faire en utilisant attr, l'erreur que vous avez faite est que vous mettez les vrais guillemets. au lieu de cela, essayez ceci:

$("input").attr("required", true);

— Joz Naveen Joz
source

2

@JohnMeyer "input" est le nom d'un sélecteur de balises

— dave4jr

requiredest un attribut booléen et ne doit jamais être omis (pour "false"), ou avoir la même valeur que son nom (c'est-à-dire "required") pour "true". Il est en fait préférable d'utiliser .prop().

— Alnitak

@Alnitak Pas si vous travaillez à rendre un site compatible avec IE, prop()cela ne fonctionne pas là-dessus comme sur les navigateurs modernes. Il est toujours préférable d'utiliser $(ele).attr("required", true)et falsede supprimer.

— Oliver Heward

29

J'ai trouvé que les implémentations suivantes sont efficaces:

$('#freeform_first_name').removeAttr('required');

$('#freeform_first_name').attr('required', 'required');

Ces commandes (attr, removeAttr, prop) se comportent différemment selon la version de JQuery que vous utilisez. Veuillez consulter la documentation ici: https://api.jquery.com/attr/

— John Meyer
source

6

Utilisation de la .attrméthode

.attr(attribute,value); // syntax

.attr("required", true);
// required="required"

.attr("required", false);
//

En utilisant .prop

.prop(property,value) // syntax

.prop("required", true);
// required=""

.prop("required", false);
//

En savoir plus d'ici

https://stackoverflow.com/a/5876747/5413283

— Dexter
source

4

J'ai trouvé que jquery 1.11.1 ne le fait pas de manière fiable.

J'ai utilisé $('#estimate').attr('required', true)et $('#estimate').removeAttr('required').

La suppression requiredn'était pas fiable. Cela laissait parfois l' requiredattribut sans valeur. Puisqu'il requireds'agit d'un attribut booléen, sa simple présence, sans valeur, est considérée par le navigateur comme true.

Ce bug était intermittent et j'en avais marre de jouer avec. Passé à document.getElementById("estimate").required = trueet document.getElementById("estimate").required = false.

— Doris Gammenthaler
source

removeAttrne fonctionne pas pour moi. Ensuite, j'utilise votre solution et fonctionne très bien. Merci!

— Diego Somar

4

Ne doit pas mettre vrai avec des guillemets doubles "", cela devrait ressembler à

$(document).ready(function() {            
   $('input').attr('required', true);   
});

Vous pouvez également utiliser des accessoires

jQuery(document).ready(function() {            
   $('input').prop('required', true);   
});

Au lieu de vrai, vous pouvez essayer requis. Tel que

$('input').prop('required', 'required');

— Rokan Nashp
source