Javascript'te bir textgiriş kutusunu gerektiği gibi işaretlemeye çalışıyorum .

<input id="edName" type="text" id="name">

Alan başlangıçta şu şekilde işaretlenmişse required:

<form>
    <input id="edName" type="text" id="name" required><br>
    <input type="submit" value="Search">
</form>

Kullanıcı göndermeye çalıştığında bir doğrulama hatası alır:

Ama şimdi requiredözniteliği Javascript aracılığıyla "çalışma zamanında" ayarlamak istiyorum :

<form>
    <input id="edName" type="text" id="name"><br>
    <input type="submit" value="Search">
</form>

ilgili komut dosyasıyla:

//recommended W3C HTML5 syntax for boolean attributes
document.getElementById("edName").attributes["required"] = "";         

Şimdi gönderdiğim zaman dışında, doğrulama kontrolü yok, blok yok.

HTML5 doğrulama boole özelliğini ayarlamanın doğru yolu nedir ?

jsFiddle

Özelliğin değeri nedir diye mi soruyorsunuz?

HTML5 doğrulama requiredözelliği, belgelenen bir şekilde Boolean:

4.10.7.3.4 requiredÖznitelik

requiredÖznitelik bir olduğunu boolean özellik . Belirtildiğinde, eleman gereklidir.

Bir booleanözniteliğin nasıl tanımlanacağına dair pek çok el sıkışması var . HTML5 spesifikasyon notları:

Bir öğede boole özniteliğinin varlığı gerçek değeri temsil eder ve özniteliğin yokluğu yanlış değeri temsil eder.

Öznitelik mevcutsa, değeri ya boş dize ya da ASCII büyük / küçük harfe duyarlı olmayan, özniteliğin kurallı adı ile eşleşen ve başında veya sonunda boşluk olmayan bir değer olmalıdır.

Bu, bir required boole özelliğini iki farklı yolla belirtebileceğiniz anlamına gelir :

edName.attributes.required = ""; //the empty string
edName.attributes.required = "required"; //the attribute's canonical name

Ama özniteliğin gerçekten değeri nedir?

Bu problemle ilgili jsFiddle'ıma baktığınızda , requirednitelik işaretlemede tanımlanmışsa şunu fark edeceksiniz :

<input id="edName" type="text" id="name" required>

Sonra özelliğinin değeri olduğunu değil boş dize, ne özelliğin standart adı:

edName.attributes.required = [object Attr]

Bu bir çözüme götürebilir.

requireda, yansıyan özelliği (gibi id, name, typeve gibi), bu yüzden:

element.required = true;

... elementgerçek inputDOM öğesi nerede , örneğin:

document.getElementById("edName").required = true;

(Tamlık için.)

Yeniden:

Bu durumda, özniteliğin değeri boş dizge veya özniteliğin kurallı adı değildir:

edName.attributes.required = [object Attr]

Bunun nedeni required, bu kodun bir öznitelik nesnesi olması , bir dizge değil; attributesa, NamedNodeMapolan değerlerdir Attrnesneler . Birinin değerini elde etmek için valuemülküne bakarsınız . Ancak bir boole özniteliği için değer alakalı değildir; nitelik haritada mevcuttur (doğru) veya yoktur (yanlış).

Yani eğer required değildi yansıyan, sen bir özellik ekleyerek ayarlayın ediyorum:

element.setAttribute("required", "");

... eşdeğeri olan element.required = true. Tamamen kaldırarak temizlersiniz:

element.removeAttribute("required");

... eşdeğeri olan element.required = false.

Ancak requiredyansıtıldığı için bunu yapmak zorunda değiliz .

Kısa versiyon

element.setAttribute("required", "");    //turns required on
element.required = true;                 //turns required on through reflected attribute
jQuery(element).attr('required', '');    //turns required on
$("#elementId").attr('required', '');    //turns required on

element.removeAttribute("required");     //turns required off
element.required = false;                //turns required off through reflected attribute
jQuery(element).removeAttr('required');  //turns required off
$("#elementId").removeAttr('required');  //turns required off

if (edName.hasAttribute("required")) { }  //check if required
if (edName.required) { }                 //check if required using reflected attribute

Uzun versiyon

TJ Crowder yansıyan özellikleri göstermeyi başardığında , aşağıdaki sözdiziminin yanlış olduğunu öğrendim :

element.attributes["name"] = value; //bad! Overwrites the HtmlAttribute object
element.attributes.name = value;    //bad! Overwrites the HtmlAttribute object
value = element.attributes.name;    //bad! Returns the HtmlAttribute object, not its value
value = element.attributes["name"]; //bad! Returns the HtmlAttribute object, not its value

Sen gerekir geçmesi element.getAttributeve element.setAttribute:

element.getAttribute("foo");         //correct
element.setAttribute("foo", "test"); //correct

Bunun nedeni, özniteliğin aslında özel bir HtmlAttribute nesnesi içermesidir :

element.attributes["foo"];           //returns HtmlAttribute object, not the value of the attribute
element.attributes.foo;              //returns HtmlAttribute object, not the value of the attribute

Bir öznitelik değerini "true" olarak ayarlayarak , gerektirdiği HtmlAttribute nesnesi yerine yanlışlıkla onu bir String nesnesine ayarlamış olursunuz :

element.attributes["foo"] = "true";  //error because "true" is not a HtmlAttribute object
element.setAttribute("foo", "true"); //error because "true" is not an HtmlAttribute object

Kavramsal olarak doğru fikir (yazılı bir dilde ifade edilir) şudur:

HtmlAttribute attribute = new HtmlAttribute();
attribute.value = "";
element.attributes["required"] = attribute;

Bu nedenle:

• getAttribute(name)
• setAttribute(name, value)

var olmak. Değerin içindeki HtmlAttribute nesnesine atanması üzerine çalışma yaparlar.

Bunun üzerine bazı nitelikler yansıtılır . Bu, onlara Javascript'ten daha güzel bir şekilde erişebileceğiniz anlamına gelir:

//Set the required attribute
//element.setAttribute("required", ""); 
element.required = true;

//Check the attribute
//if (element.getAttribute("required")) {...}
if (element.required) {...}

//Remove the required attribute
//element.removeAttribute("required");
element.required = false;

Yapmak istemediğiniz şey , .attributeskoleksiyonu yanlışlıkla kullanmaktır :

element.attributes.required = true;     //WRONG!
if (element.attributes.required) {...}  //WRONG!
element.attributes.required = false;    //WRONG!

Test Durumları

Bu, bir requiredözniteliğin kullanımı etrafında test edilmesine , öznitelik aracılığıyla döndürülen değerlerin ve yansıtılan özelliğin karşılaştırılmasına yol açtı.

document.getElementById("name").required;
document.getElementById("name").getAttribute("required");

sonuçlarla:

HTML                         .required        .getAttribute("required")
==========================   ===============  =========================
<input>                      false (Boolean)  null (Object)
<input required>             true  (Boolean)  "" (String)
<input required="">          true  (Boolean)  "" (String)
<input required="required">  true  (Boolean)  "required" (String)
<input required="true">      true  (Boolean)  "true" (String)
<input required="false">     true  (Boolean)  "false" (String)
<input required="0">         true  (Boolean)  "0" (String)

.attributesKoleksiyona doğrudan erişmeye çalışmak yanlış. DOM özelliğini temsil eden nesneyi döndürür:

edName.attributes["required"] => [object Attr]
edName.attributes.required    => [object Attr]

Bu, neden .attributesdoğrudan koleksiyonla konuşmamanız gerektiğini açıklıyor . Özniteliklerin değerlerini değil , özniteliklerin kendilerini temsil eden nesneleri değiştiriyorsunuz.

Nasıl gerekli ayarlanır?

requiredBir özelliği belirlemenin doğru yolu nedir ? İki seçeneğiniz vardır: yansıtılan özellik veya özelliği doğru şekilde ayarlayarak:

element.setAttribute("required", "");         //Correct
edName.required = true;                       //Correct

Kesin olarak konuşursak, başka herhangi bir değer özelliği "ayarlayacaktır". Ancak Booleanözniteliklerin tanımı, yalnızca doğruyu"" belirtmek için boş dizeye ayarlanması gerektiğini belirtir . Aşağıdaki yöntemlerin tümü Boolean niteliğini ayarlamak için çalışır , required

ama onları kullanmayın :

element.setAttribute("required", "required"); //valid, but not preferred
element.setAttribute("required", "foo");      //works, but silly
element.setAttribute("required", "true");     //Works, but don't do it, because:
element.setAttribute("required", "false");    //also sets required boolean to true
element.setAttribute("required", false);      //also sets required boolean to true
element.setAttribute("required", 0);          //also sets required boolean to true

Özelliği doğrudan ayarlamaya çalışmanın yanlış olduğunu zaten öğrendik:

edName.attributes["required"] = true;       //wrong
edName.attributes["required"] = "";         //wrong
edName.attributes["required"] = "required"; //wrong
edName.attributes.required = true;          //wrong
edName.attributes.required = "";            //wrong
edName.attributes.required = "required";    //wrong

Nasıl temizlenir ?

Çalışırken hüner kaldırmakrequired özelliğini yanlışlıkla açmak için kolay olması:

edName.removeAttribute("required");     //Correct
edName.required = false;                //Correct

Geçersiz yollarla:

edName.setAttribute("required", null);    //WRONG! Actually turns required on!
edName.setAttribute("required", "");      //WRONG! Actually turns required on!
edName.setAttribute("required", "false"); //WRONG! Actually turns required on!
edName.setAttribute("required", false);   //WRONG! Actually turns required on!
edName.setAttribute("required", 0);       //WRONG! Actually turns required on!

Yansıyan .requiredözelliği kullanırken, onu kapatmak için herhangi bir "falsey" değerini ve açmak için doğru değerleri de kullanabilirsiniz . Ancak netlik için doğru ve yanlışa bağlı kalın.

Nasıl kontrol için required?

.hasAttribute("required")Yöntem aracılığıyla özniteliğin varlığını kontrol edin :

if (edName.hasAttribute("required"))
{
}

Ayrıca Boolean yansıyan .requiredözelliği aracılığıyla da kontrol edebilirsiniz :

if (edName.required)
{
}

Önemli olan özellik değil özelliktir ve değeri bir mantıksaldır.

Kullanarak ayarlayabilirsiniz

 document.getElementById("edName").required = true;

Ve jquery sürümü:

$('input').attr('required', true)
$('input').attr('required', false)

Sorunun ötesinde olduğunu biliyorum ama belki birisi bunu faydalı bulabilir :)

let formelems = document.querySelectorAll('input,textarea,select');
formelems.forEach((formelem) => {
  formelem.required = true;

});

Tüm girişi, metin alanını ve gerekli öğeleri seçmek istiyorsanız.

bunu dene ..

document.getElementById("edName").required = true;