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
la 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

Réponses:

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

DEMO FIDDLE

Inconnue
la 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
la 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
la 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
la 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
la 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
la source