내 웹 응용 프로그램 내에서 양식 필드에 대한 사용자 지정 유효성 검사를 사용하고 있습니다. 동일한 양식 내에 두 개의 버튼이 있습니다. 하나는 실제로 양식을 제출하고 다른 하나는 양식을 취소 / 재설정하는 것입니다.
주로 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> <input type="text" id="name" required="true" /><br/>
<label>Car:</label> <input type="text" id="car" required="true" /><br/>
<br/>
<input type="submit" id="btnsubmit" value="Submit!" />
</form>
</body>
</html>
내가 예상했던 일이 일어났습니다. 첫 번째 필드 “이름”은 자동으로 초점을 얻었습니다.
다른 사람이 이것에 걸려 넘어 졌습니까?
답변
방금 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에서 작동합니다.
답변
참고
<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입니다.
답변
내가 귀하의 질문을 올바르게 이해한다면, 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
답변
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;
}
}
답변
사용자 지정 속성에 대한 작은 참고 사항 : HTML5는 입자 접두사 ( data-예 :)가 붙는 한 모든 종류의 사용자 지정 속성을 허용합니다 data-my-attribute="true".
답변
괜찮아. 내 질문을 작성하는 동시에 동료 중 한 명이 이것이 실제로 HTML5 동작임을 알게했습니다. 참조 http://dev.w3.org/html5/spec/Overview.html#the-required-attribute를
HTML5에는 “필수”라는 새로운 속성이있는 것 같습니다. 그리고 Safari 5에는 이미이 속성에 대한 구현이 있습니다.
답변
양식 아래에 다음을 입력하십시오. 입력 필드가 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>
