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

Odpowiedzi:

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