필수 속성 HTML5

81

내 웹 응용 프로그램 내에서 양식 필드에 대한 사용자 지정 유효성 검사를 사용하고 있습니다. 동일한 양식 내에 두 개의 버튼이 있습니다. 하나는 실제로 양식을 제출하고 다른 하나는 양식을 취소 / 재설정하는 것입니다.

주로 Safari를 기본 브라우저로 사용합니다. 이제 Safari 5가 나오고 갑자기 취소 / 재설정 버튼이 더 이상 작동하지 않습니다. 재설정 버튼을 누를 때마다 양식의 첫 번째 필드에 초점이 맞춰졌습니다. 그러나 이것은 내 사용자 지정 양식 유효성 검사와 동일한 동작입니다. 다른 브라우저로 시도하면 모든 것이 잘 작동했습니다. 나는 사파리 5 문제 여야 만했다.

Javascript 코드를 약간 변경 한 결과 다음 줄이 문제를 일으키는 것으로 나타났습니다.

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

이것이 실제로 문제인지 확인하기 위해 테스트 시나리오를 만들었습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>

<body>
    <form id="someform">
        <label>Name:</label>&nbsp;<input type="text" id="name" required="true" /><br/>
        <label>Car:</label>&nbsp;<input type="text" id="car" required="true" /><br/>
        <br/>
        <input type="submit" id="btnsubmit" value="Submit!" />
    </form>
</body>
</html>

내가 예상했던 일이 일어났습니다. 첫 번째 필드 "이름"은 자동으로 초점을 얻었습니다.

다른 사람이 이것에 걸려 넘어 졌습니까?

html

— Joop
소스

2

이제 필수 속성을 true로 설정할 필요가 없습니다. 예 : <input type = "text"id = "name"required = "true"/> 및 <input type = "text"id = "name"required />는 동일합니다

— RSK

사실, 제가 XHTML로 코딩하는 데 익숙했을 때는 나쁜 습관입니다.하지만 모든 최신 브라우저가 = "required"없이이 태그를 지원합니까? 사파리는 그렇지 않다고 생각합니다 ...

— Loic Cara

실제 및 예상되는 동작은 무엇입니까?

— Ciro Santilli 郝海东冠状病六四事件法轮功

blog.grayghostvisuals.com/html/using-html-required-attribute 에 따르면 "속성이있는 경우 해당 값은 빈 문자열이거나 속성의 정식 이름에 대해 대소 문자를 구분하지 않는 값이어야합니다. 선행 또는 후행 공백. " 그래서 대신 요구의 "부울"속성 = "true"를 요구 = "요구"하거나 요구해야

— 조지 Birbilis

49

방금 Safari 5에서이 문제가 발생했고 Opera 10에서 한동안 문제가 있었지만 수정하는 데 시간을 소비 한 적이 없습니다. 이제 수정하고 게시물을 확인했지만 양식을 취소하는 방법에 대한 해결책은 아직 없습니다. 많은 검색 끝에 마침내 뭔가를 찾았습니다.

http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate

<input type=submit formnovalidate name=cancel value="Cancel">

Safari 5 및 Opera 10에서 작동합니다.

— Darrik Spaude
소스

8

novalidate전체 양식에 대해이 작업을 수행하기 위해 양식 태그를 사용할 수도 있습니다 .

— Michael Mior 2011 년

팁 덕분에 현재 탭의 모든 양식에이 속성을 추가하는 작은 Chrome 확장 프로그램을 패키징했습니다! chrome.google.com/webstore/detail/html5-form-validation-rem/…

— Damien

내 경우에는 중요 formnovalidate했으며 버튼 유형 제출도 함께 작동합니다 <button type="submit" formnovalidate>Submit</button>.

— Mayeenul Islam

256

참고

<input type="text" id="car" required="true" />

잘못되었습니다. 다음 중 하나 여야합니다.

<input type="text" id="car" required />
<input type="text" id="car" required="" />
<input type="text" id="car" required='' />
<input type="text" id="car" required=required />
<input type="text" id="car" required="required" />
<input type="text" id="car" required='required' />

값이 값이 양식 컨트롤을 선택 사항으로 만들 true것임을 암시 하기 때문 false입니다.

— MS2ger
소스

7

이 대답은 사실이지만, 그것이 우리가 여기에있는 문제가 아니라고 생각합니다.

— PhoneixS

사용하기에 안전한가요? ... 내 말은 이것을 사용해야합니까 아니면 자바 스크립트 유효성 검사를 고수해야합니까? 안전 I의 평균에 의해 수행 다른 브라우저 / 장치에이 솔루션을 생산하고 이상 ...

— kebyang

8

원래 코드가 "잘못된"것이 아니라는 점을 지적하고 싶습니다. false이는 필드를 선택 사항 (필수 아님)으로 만들기 위해 사용할 수 있음을 의미합니다 . 이해해야 할 것은 required속성 의 존재로 인해 필드가 필요하다는 것입니다. 필드를 선택적으로 만드는 유일한 방법은 속성을 제거하는 것입니다. 그리고 서버 측 유효성 검사가 정말 중요한 모든 것입니다 (비명을 지르게되어 죄송합니다).

— Ryan Wheale

(그 자체로 충분가있는 동안) 정말 너무 중요한 나는 클라이언트 측 유효성 검사를 생각 @RyanWheale

— jinglesthula

1

@jinglesthula-클라이언트 측 유효성 검사는 사용자의 편의 일뿐입니다 (서버 왕복 시간을 절약하여 더 나은 UX를 제공함). 이전 댓글에 "[브라우저간에 사용하는 것이 안전 합니까 ]" -대답은 서버 측 유효성 검사가 작동하는 한 실제로 중요하지 않다는 것입니다 (예 : 이전 브라우저는 HTML5 형식을 인식하지 못함). 확인하고 null 값이있는 "필수"필드를 제출합니다.)

— Ryan Wheale

19

내가 귀하의 질문을 올바르게 이해한다면, required속성이 Safari에서 기본 동작을 갖는 것처럼 보이는 것이 혼란 스럽습니까? 그렇다면 http://w3c.github.io/html/sec-forms.html#the-required-attribute를 참조하십시오.

required HTML 5의 사용자 지정 속성이 아닙니다. 사양에 정의되어 있으며 현재 사용하고있는 방식으로 정확하게 사용됩니다.

편집 : 글쎄, 정확 하지 않습니다 . ms2ger가 지적했듯이 required속성은 부울 속성 이며 여기에 HTML 5 사양이 이에 대해 말하는 내용이 있습니다.

참고 : 부울 속성에는 "true"및 "false"값이 허용되지 않습니다. 거짓 값을 나타내려면 속성을 모두 생략해야합니다.

참조 : http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes

— 데이비드 포스터
소스

2

그렇기 때문에 표준 개체에서 사용자 지정 속성이나 속성을 구성하지 않아야합니다.

— Quentin

특정 페이지에 대해 Chrome 및 Safari에서 이것을 끄는 방법에 대한 아이디어가 있습니까?

— Restuta 2010-06-16

@Restuta는 about : flags로 이동하여 Chrome에서이를 비활성화합니다. Firefox, 잘 모르겠습니다.

— therealklanni

8

Safari 7.0.5는 여전히 입력 필드 유효성 검사 알림을 지원하지 않습니다.

극복하기 위해 다음과 같은 대체 스크립트를 작성할 수 있습니다. http://codepen.io/ashblue/pen/KyvmA

브라우저에서 지원하는 HTML5 / CSS3 기능을 확인하려면 http://caniuse.com/form-validation을 확인하세요.

function hasHtml5Validation () {
  //Check if validation supported && not safari
  return (typeof document.createElement('input').checkValidity === 'function') && 
    !(navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0);
}

$('form').submit(function(){
    if(!hasHtml5Validation())
    {
        var isValid = true;
        var $inputs = $(this).find('[required]');
        $inputs.each(function(){
            var $input = $(this);
            $input.removeClass('invalid');
            if(!$.trim($input.val()).length)
            {
                isValid = false;
                $input.addClass('invalid');                 
            }
        });
        if(!isValid)
        {
            return false;
        }
    }
});

SASS / LESS :

input, select, textarea {
    @include appearance(none);
    border-radius: 0px;

    &.invalid {
        border-color: red !important;
    }
}

— Evalds Urtans
소스

감사합니다. 이것은 저에게 많은 도움이되었습니다.

— theGreenCabbage 2015 년

평범한 CSS입니까?

— James A Mohler

나는 평생 동안 필요한 것으로 표시된 입력이 작동하지 않고이 Q & A를 찾았을 때 여전히 작동하는 iPod touch를 가지고 있습니다. 이 대답은 나를 위해 일한 유일한 대답이었습니다. 그냥 나눌 거라고 생각 했어.

— Funk Forty Niner

7

사용자 지정 속성에 대한 작은 참고 사항 : HTML5는 입자 접두사 ( data-예 :)가 붙는 한 모든 종류의 사용자 지정 속성을 허용합니다 data-my-attribute="true".

— 러더
소스

1

그리고 이들은 이전 브라우저에서 잘 작동합니다 (새 API가 아닌 값에 액세스하기 위해 고유 한 코드가 필요함을 제외하고). 앞으로 추가되는 공식 속성).

— Paul D. Waite 2011

1

실제로 사용자 지정 속성은 말 그대로 무엇이든 될 수 있습니다. "데이터 -"를 표시됩니다 접두사 그 element.dataset예를 들어 (단, 객체뿐만 아니라 다른 장점은, jQuery를 자동으로 사용하는 "데이터 -"앞에 둔 사용자 정의 속성의 값을 잡을 수있을 것입니다 .data()즉, 방법 .data("myAttribute")의 = 값 data-my-attribute). 더 짧은 사용자 정의 속성을 사용하면 때때로 사용자 정의 CSS3 선택기를 만드는 데 유용 할 수 있습니다.

— therealklanni

3

괜찮아. 내 질문을 작성하는 동시에 동료 중 한 명이 이것이 실제로 HTML5 동작임을 알게했습니다. 참조 http://dev.w3.org/html5/spec/Overview.html#the-required-attribute를

HTML5에는 "필수"라는 새로운 속성이있는 것 같습니다. 그리고 Safari 5에는 이미이 속성에 대한 구현이 있습니다.

— Joop
소스

젠장, 동일한 답변을 게시 한 후 몇 초 내에 자신의 질문에 답변하셨습니다!

— David Foster

제 동료 중 한 명이 정말 감사합니다. 이것은 내가 생각하는 다른 사람들에게 흥미로울 수 있습니까?

— Joop

명확히! 최종 HTML5 사양이 양식 전면에서 무엇을 제공해야하는지 알게되어 매우 기쁩니다.

— David Foster

2

양식 아래에 다음을 입력하십시오. 입력 필드가 required.

<script>
    var forms = document.getElementsByTagName('form');
    for (var i = 0; i < forms.length; i++) {
        forms[i].noValidate = true;
        forms[i].addEventListener('submit', function(event) {
            if (!event.target.checkValidity()) {
                event.preventDefault();
                alert("Please complete all fields and accept the terms.");
            }
        }, false);
    }
</script>

— 정서
소스