jQuery add erforderlich zu Eingabefeldern

171

Ich habe nach Möglichkeiten gesucht, wie jQuery mithilfe der HTML5-Validierung automatisch in alle meine Eingabefelder schreiben kann, aber ich habe Probleme, anzugeben, wo es geschrieben werden soll.

Ich möchte das nehmen

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

und haben es automatisch add erforderlich vor dem letzten Tag

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

Ich dachte, ich könnte etwas in der Art von tun

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

Aber es funktioniert nicht. Jede Hilfe wird sehr geschätzt.

javascript jquery validation Miura-shi
quelle

2

Ist es nicht in Dom fertig gewickelt? $(function(){....});

PSL

Ich benutze diese jsfiddle.net/japaneselanguagefriend/LEZ4r

Miura-shi

Wenn 'input' eine ID ist, fehlt der jquery hier das # im Selektor.

John Meyer

@ JohnMeyer "Eingabe" ist eine Tag-Auswahl. Keine # erforderlich, wenn auf Eingabe-Tags abgezielt wird

Spartacus

418

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

DEMO FIDDLE

Unbekannt
quelle

1

Hmm, eine Senden-Schaltfläche wurde hinzugefügt, aber die Eingabefelder wurden noch nicht überprüft oder das erforderliche Attribut hinzugefügt. jsfiddle.net/japaneselanguagefriend/LEZ4r

Miura-shi

1

@ JohnMeyer "Eingabe" ist ein Tag-Selektor

morefromalan

1

habe einen TypeError: element.prop is not a functionFehler bekommen

davideghz

@ Miura-shi Sie vermissen die <form></form>Tags in Ihrem jsFiddle

JESTech

Wenn es jemanden helfen kann: dies war zunächst nicht für mich arbeiten , weil ich rufe .prop('required',true)am Eingang vor dem Aufruf .css("display", "block")auf sich.

Elektrotyp

52

Sie können dies mit attr tun. Der Fehler, den Sie gemacht haben, ist, dass Sie die wahren Anführungszeichen setzen. Versuchen Sie stattdessen Folgendes:

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

Joz Naveen Joz
quelle

2

@ JohnMeyer "Eingabe" ist der Name eines Tag-Selektors

dave4jr

requiredist ein boolesches Attribut und sollte immer nur weggelassen werden (für "false") oder denselben Wert wie sein Name (dh "required") für "true" haben. Es ist eigentlich besser zu benutzen .prop().

Alnitak

@Alnitak Nicht, wenn Sie daran arbeiten, eine Site mit dem IE kompatibel zu machen, prop()funktioniert dies dort nicht wie in modernen Browsern. Immer noch am besten zu verwenden $(ele).attr("required", true)und falsezu entfernen.

Oliver Heward

29

Ich habe festgestellt, dass die folgenden Implementierungen effektiv sind:

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

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

Diese Befehle (attr, removeAttr, prop) verhalten sich je nach verwendeter Version von JQuery unterschiedlich. Bitte beziehen Sie sich auf die Dokumentation hier: https://api.jquery.com/attr/

John Meyer
quelle

6

Mit .attrMethode

.attr(attribute,value); // syntax

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

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

Verwenden von .prop

.prop(property,value) // syntax

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

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

Lesen Sie hier mehr

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

Dexter
quelle

4

Ich habe festgestellt, dass jquery 1.11.1 dies nicht zuverlässig macht.

Ich habe $('#estimate').attr('required', true)und benutzt$('#estimate').removeAttr('required') .

Das Entfernen requiredwar nicht zuverlässig. Manchmal blieb das requiredAttribut ohne Wert. Da requiredes sich um ein boolesches Attibut handelt, wird seine bloße Präsenz ohne Wert vom Browser als angesehen true.

Dieser Fehler trat nur sporadisch auf, und ich hatte es satt, mich damit zu beschäftigen. Umgeschaltet auf document.getElementById("estimate").required = trueund document.getElementById("estimate").required = false.

Doris Gammenthaler
quelle

removeAttrfunktioniert bei mir nicht Dann benutze ich deine Lösung und funktioniert gut. Vielen Dank!

Diego Somar

4

Sollte true nicht mit einem doppelten Anführungszeichen "" einschließen , sollte es so sein

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

Sie können auch Stütze verwenden

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

Anstelle von true können Sie es bei Bedarf versuchen. Sowie

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

Rokan Nashp
quelle

jQuery add erforderlich zu Eingabefeldern

Antworten: