text입력 상자를 다음과 같이 표시하려고합니다.Javascript에서 필요한 .

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

필드가 처음에 다음으로 표시되어있는 경우 required :

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

사용자가 제출을 시도하면 유효성 검사 오류가 발생합니다.

하지만 지금 required은 "런타임" 에서 속성 을 설정하고 싶습니다. Javascript를 통해 .

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

해당 스크립트로 :

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

지금 제출할 때를 제외하고는 유효성 검사도없고 차단도 없습니다.

HTML5 유효성 검사 부울 속성 을 설정하는 올바른 방법 은 무엇입니까? ?

jsFiddle

속성의 가치는 무엇입니까?

HTML5 유효성 검사 required속성은 다음 과 같이 문서화 됩니다 Boolean.

4.10.7.3.4 required속성

required속성은이다 부울 속성 . 지정된 경우 요소가 필요합니다.

boolean속성 을 정의하는 방법에 대해 많은 수작업이 있습니다. HTML5 사양 노트 :

요소에 부울 속성이 있으면 참 값을 나타내고 속성이 없으면 거짓 값을 나타냅니다.

속성이있는 경우 해당 값은 선행 또는 후행 공백없이 속성의 표준 이름에 대해 ASCII 대소 문자를 구분하지 않는 일치 값이거나 빈 문자열이어야합니다.

이는 required 부울 속성을 두 가지 다른 방법으로 지정할 수 있음을 의미합니다 .

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

그러나 실제로 속성의 가치는 무엇입니까 입니까?

이 문제의 jsFiddle 을 보면 required속성이 마크 업에 정의되어 있는지 알 수 있습니다 .

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

그런 다음 속성의 값이 없는 빈 문자열이나 속성의 정식 이름은 :

edName.attributes.required = [object Attr]

그것은 해결책으로 이어질 수 있습니다.

requiredA는 반사 속성 (같은 id, name, type, 등), 너무 :

element.required = true;

... element실제 inputDOM 요소 는 어디에 있습니까? 예 :

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

(완전 함을 위해.)

레:

그러면 속성 값은 빈 문자열도 아니고 속성의 정식 이름도 아닙니다.

edName.attributes.required = [object Attr]

그 required코드 에서 문자열 이 아니라 속성 객체 이기 때문 입니다 . attributesA는 NamedNodeMap, 값이 Attr개체 . 그들 중 하나의 가치를 얻으려면, 당신은 그것의value 속성을 입니다. 그러나 부울 속성의 경우 값은 관련이 없습니다. 속성이 맵에 있거나 (true) 존재하지 않습니다 (false).

따라서 반영 required 되지 않은 경우 속성을 추가하여 설정합니다.

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

... 이는 element.required = true. 완전히 제거하여 지울 수 있습니다.

element.removeAttribute("required");

...에 해당하는 element.required = false .

그러나 우리는 required그것을 반영하기 때문에 그것을 할 필요가 없습니다 .

짧은 버전

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

긴 버전

TJ Crowder가 반영된 속성 을 지적한 후 다음 구문이 잘못되었음을 알게되었습니다 .

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

당신은 해야한다 통과 element.getAttribute및 element.setAttribute:

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

이는 특성에 실제로 특수 HtmlAttribute 개체 가 포함되어 있기 때문입니다 .

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

속성 값을 "true"로 설정 하면 필요한 HtmlAttribute 개체가 아닌 String 개체 로 잘못 설정하는 것입니다 .

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

개념적으로 올바른 아이디어 (유형화 된 언어로 표현됨)는 다음과 같습니다.

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

이는 이유:

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

있다. 내부에있는 HtmlAttribute 개체에 값을 할당하는 작업을 수행합니다.

여기에 일부 속성이 반영됩니다 . 즉, Javascript에서 더 멋지게 액세스 할 수 있습니다.

//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;

당신이 하지 않는 싶은 것은 사용하는 실수입니다 .attributes모음 :

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

테스트 케이스

이로 인해 required속성 사용을 테스트하고 속성을 통해 반환 된 값과 반영된 속성을 비교했습니다.

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

결과 :

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)

.attributes컬렉션에 직접 액세스하려는 것은 잘못되었습니다. DOM 속성을 나타내는 객체를 반환합니다.

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

이것은 당신이 .attributes수집품에 직접 말하지 말아야하는 이유를 설명합니다 . 속성 의 값 을 조작하는 것이 아니라 속성 자체를 나타내는 객체입니다.

필수 설정 방법?

required속성 을 설정하는 올바른 방법은 무엇입니까 ? 두 가지 선택, 즉 reflect 속성 또는 속성 을 올바르게 설정하는 방법이 있습니다.

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

엄밀히 말하면 다른 값은 속성을 "설정"합니다. 그러나 Boolean속성 의 정의 ""는 true 를 나타 내기 위해 빈 문자열로만 설정되어야 함 을 나타냅니다 . 다음 메서드는 모두 부울 을 설정 하는 데 사용 됩니다 .required 속성

그러나 사용하지 마십시오 .

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

우리는 이미 속성을 직접 설정하려는 것이 잘못되었음을 배웠습니다.

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

클리어 방법필수 ?

시도 트릭 제거required 속성은 실수로 컴퓨터를 켭 쉽게 것입니다 :

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

잘못된 방법으로 :

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!

반사 .required속성을 사용할 때 "falsey"를 사용할 수도 있습니다. 값을 사용하여 끄고 진실 값을 사용하여 켤 수도 있습니다. 그러나 명확성을 위해 진실과 거짓을 고수하십시오.

방법 확인 을 위해 required?

.hasAttribute("required")메소드를 통해 속성이 있는지 확인하십시오 .

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

부울 반영 .required속성을 통해 확인할 수도 있습니다.

if (edName.required)
{
}

중요한 것은 속성이 아니라 속성 이며 그 값은 부울입니다.

다음을 사용하여 설정할 수 있습니다.

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

그리고 jquery 버전 :

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

나는 그것이 질문을 넘어선다는 것을 알고 있지만 누군가 이것이 도움이 될 것입니다. :)

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

});

모든 입력, 텍스트 영역 및 필요한 요소를 선택하려는 경우.

이거 한번 해봐 ..

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