jQuery dodaj wymagane do pól wejściowych

171

Szukałem sposobów, aby jQuery automatycznie zapisywał wymagane przy użyciu walidacji html5 we wszystkich moich polach wejściowych, ale nie mogę powiedzieć, gdzie to napisać.

Chcę to wziąć

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

i automatycznie doda wymagane przed tagiem zamykającym

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

Pomyślałem, że mógłbym zrobić coś na wzór

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

Ale to nie działa. Każda pomoc jest bardzo ceniona.

javascript jquery validation

— Miura-shi
źródło

2

Czy nie jest zapakowany w dom gotowy? $(function(){....});

— PSL

Używam tego jsfiddle.net/japaneselanguagefriend/LEZ4r

— Miura-shi

jeśli „input” jest identyfikatorem, w jquery brakuje # w selektorze.

— John Meyer

@JohnMeyer "input" to selektor tagu. # Nie jest potrzebny, jeśli kierujesz na tagi wejściowe

— Spartakus

420

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

DEMO FIDDLE

— Nieznany
źródło

1

Hmm, dodano przycisk przesyłania, ale nadal nie sprawdzam poprawności ani nie dodajemy wymaganego atrybutu do pól wejściowych. jsfiddle.net/japaneselanguagefriend/LEZ4r

— Miura-shi

1

@JohnMeyer „input” to selektor tagów

— morefromalan

1

dostałem TypeError: element.prop is not a functionbłąd

— davideghz

@ Miura-shi Brakuje <form></form>tagów w swoim jsFiddle

— JESTech

Jeśli to może komuś pomóc: na początku to nie działało, ponieważ dzwoniłem .prop('required',true)do wejścia, zanim go wezwałem .css("display", "block").

— elektrotyp

52

Możesz to zrobić za pomocą attr, błąd, który popełniłeś, polega na umieszczeniu prawdziwych cudzysłowów wewnętrznych. zamiast tego spróbuj tego:

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

— Joz Naveen Joz
źródło

2

@JohnMeyer „input” to nazwa selektora tagów

— dave4jr

requiredjest atrybutem logicznym i należy go zawsze pomijać (dla „fałszu”) lub mieć taką samą wartość jak jego nazwa (tj. "required"dla „prawda”). Właściwie lepiej jest użyć .prop().

— Alnitak

@Alnitak Nie, jeśli pracujesz nad dostosowaniem witryny do IE, prop()nie działa tam, tak jak w nowoczesnych przeglądarkach. Nadal najlepiej używać $(ele).attr("required", true)i falseusuwać.

— Oliver Heward

29

Zauważyłem, że następujące implementacje są skuteczne:

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

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

Te polecenia (attr, removeAttr, prop) zachowują się różnie w zależności od używanej wersji JQuery. Zapoznaj się z dokumentacją tutaj: https://api.jquery.com/attr/

— John Meyer
źródło

6

Korzystanie z .attrmetody

.attr(attribute,value); // syntax

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

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

Za pomocą .prop

.prop(property,value) // syntax

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

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

Przeczytaj więcej tutaj

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

— Dexter
źródło

4

Zauważyłem, że jquery 1.11.1 nie robi tego niezawodnie.

Użyłem $('#estimate').attr('required', true)i $('#estimate').removeAttr('required').

Usunięcie requirednie było niezawodne. Czasami pozostawiał requiredatrybut bez wartości. Ponieważ requiredjest to atrybut logiczny, sama jego obecność, bez wartości, jest postrzegana przez przeglądarkę jako true.

Ten błąd był sporadyczny i zmęczyłem się nim. Przełączono na document.getElementById("estimate").required = truei document.getElementById("estimate").required = false.

— Doris Gammenthaler
źródło

removeAttrdla mnie nie działa. Wtedy używam twojego rozwiązania i działa dobrze. Dzięki!

— Diego Somar

4

Nie należy załączyć prawda z podwójny cudzysłów „” powinna być jak

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

Możesz także użyć prop

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

Zamiast prawdy możesz spróbować wymagane. Jak na przykład

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

— Rokan Nashp
źródło