수동으로 HTML5 양식 유효성 검사 호출에 이어 이전 버전의 IE에서 HTML5와 유사한 양식 유효성 검사를 제공하기 위해 웹 심을 사용해 보았습니다.
양식 유효성 검사가 작동하는 동안 (필요한 필드에 오류가 표시됨) on 함수 <form onsubmit="return verify(this);" >가 호출되는 것을 방지하지 않습니다. 이것이 발생하는 것이 합리적인 기대인지 확실하지 않습니다.
둘째, 폴백으로 verify () 함수에 확인을 추가하여 양식이 유효한 경우에만 계속합니다. 이를 위해 verify () function ()에 다음 코드를 추가했습니다.
function verify(theForm) {
form = theForm;
if (!form.checkValidity()) {
return false;
}
/* continue with recaptcha processing */
}
테스트 할 IE8의 실제 버전이 없기 때문에 IETester에서 IE8을 사용하고 있습니다. Javascript 디버깅은 checkValidity ()가 양식에 존재하지 않는다고 제안하는 것 같습니다. 웹 심의 목적이기 때문에 checkValidity가 폼에 존재해야한다는 합리적인 기대가 있다고 생각합니다.
html 헤드의 초기화 코드는
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/branding/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="/branding/js-webshim/minified/polyfiller.js"></script>
<script>
$.webshims.polyfill('forms');
</script>
문서화 된 방법에 매우 가깝습니다. 그리고 필수 필드 누락의 오류 메시지가 표시되기 때문에 webshims가 부분적으로 작동하는 것 같습니다.
http://jsfiddle.net/BqW9D/2/ 에서 무슨 일이 일어나고 있는지에 대한 데모를 추가 했지만 IE8 또는 IE9와 함께 IETester에서 jsfiddle을 실행할 수 없습니다. 그것은 단지 엉망입니다.
예, 제출 이벤트가 호출되지 않고 메소드가 호출 될 수 있다는 것은 합리적인 기대입니다. 그러나 webshims 의 Minor abstraction 섹션을 읽어보십시오 . 당신이 가진 모든 문제는 폼뿐만 아니라 다른 모든 폴리 필에 대해서도 설명됩니다.
주요 문제 :-인라인 이벤트 핸들러를 사용하지 마십시오! -메서드 (extendNative)에 옵트 인하는 경우에만 메서드가 폴리 필됩니다 (많은 메모리를 사용하기 때문에) 메서드의 경우 가장 좋은 옵션은 webshims callProp 확장을 사용하는 것입니다.
암호:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="/branding/js-webshim/minified/polyfiller.js"></script>
<script>
//webshims.setOptions('extendNative', true); //either use this or use $.callProp
webshims.polyfill('forms');
</script>
암호:
<form class="validate">
<input name="texbox" type="text" required="required" />
<input type="submit" />
</form>
3 .: 이제 JS를 사용하여 양식을 작성하십시오.
암호:
$(function(){
//add events to submit and/or invalid
$('form.validate').on('submit invalid', function(){
if(window.console){
console.log(e.type)
}
if(e.type == 'submit' && !$(this).callProp('checkValidity')){
return false;
}
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다