표준 HTML5 유효성 검사 (양식)를 트리거 하시겠습니까?
대체 버튼을 사용하지 않고 양식에서 표준 HTML5 유효성 검사를 트리거하는 방법을 아는 사람이? (JavaScript 또는 jQuery).
요청 을 보내고 싶지 않고POST/GET 유효성 검사를 수행합니다.
이 질문에 대한 대답 은 귀하가 찾고있는 것입니다.
요약 : 출시 할 이벤트에서 event.preventDefault().
약간의 조사 끝에 귀하의 질문에 대한 답이 될 다음 코드를 찾았습니다. (적어도 그것은 나를 위해 일했습니다)
이 코드를 먼저 사용하십시오. $(document).ready형태가 DOM에로드 될 때 차종은 확인 코드가 실행된다
$(document).ready(function()
{
$('#theIdOfMyForm').submit(function(event){
if(!this.checkValidity())
{
event.preventDefault();
}
});
});
그런 다음 $('#theIdOfMyForm').submit();코드를 호출 합니다.
최신 정보
실제로 사용자가 양식에서 잘못한 필드를 표시 한 다음 코드를 추가하십시오. event.preventDefault();
$('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
첫 번째 잘못된 입력에 증가를 맞습니다.
reportValidity 를 사용할 수 있습니다 아직 브라우저 지원이 부족합니다. Chrome, Opera 및 Firefox에서는 작동하지만 IE, Edge 또는 Safari에서는 작동하지 않습니다.
var myform = $("#my-form")[0];
if (!myform.checkValidity()) {
if (myform.reportValidity) {
myform.reportValidity();
} else {
//warn IE users somehow
}
}
( checkValidity 는 더 나은 지원을 제공하지만 IE <10 작동하지 않습니다.)
HTML5 유효성 검사가 작동 가능한 양식을 사용해야합니다. 원하는 것을 얻을 수있는 방법이 있습니다. 코드를 확인하십시오.
<body>
<h1>Validation Example</h1><br />
<h2>Insert just 1 digit<h2>
<form id="form" onsubmit="return false">
<label>Input<input type="text" pattern="[0-9]" id="input" /></label>
<input type="submit" class="hide" id="inputButton">
</form>
</body>
여기 에서 예보기
참고 : form.submit () 사용은 저에 게이지 유효합니다. 그래서 숨겨진 키 업시 트리거되는 버튼을 만들었습니다. 이유를 묻지 누군가가 그것을 할 수있을 것입니다.
짧은 대답, 아니요, 양식을하기 전에 html5 버블 인라인의 기본 기능을 '트리거'할 수 checkValidity()있는 방법이 없습니다. 입력 입력을 특정 할 수 는 있지만 다시 원하는대로 작동하지 않습니다. 유효성 검사가있는 경우에도 양식을 사용할 수있는 경우에도 사용할 수 있습니다.
유효성 검사 CSS 스타일을 적용하지 방식은 novalidate양식 에서는 속성을 양식에 추가하기 만하면 됩니다.
HTML :
<form name="login" id="loginForm" method="POST">
<input type="email" name="username" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<input type="submit" value="LOG IN" class="hero left clearBoth">
</form>
SCSS를 사용하지 않는 경우 훨씬 더 관리하기 쉬운 제품 작성하기 쉬우 며 덜 복잡하게 보이는 것이 좋습니다. 참고 : 바이올린 연습에서는 이것으로 CSS를 사용합니다. 거품 스타일 예제도 포함했습니다.
SCSS :
form:not([novalidate]) {
input, textarea {
&:required {background: transparent url('/../../images/icons/red_asterisk.png') no-repeat 98% center;}
&:required:valid {background: transparent url('/../../images/icons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;}
&:not(:focus):valid {box-shadow: none;border: 1px solid $g4;}
&:focus:invalid {background: transparent url('/../../images/icons/invalid.png') no-repeat 98% center; @include box-shadow(0 0 5px #d45252); border-color: #b03535}
}
}
span.formHintBubble {position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2));
&:after {
@include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px;
}
.cross {background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;}
}
자바 펼쳐 :
여기에서 기본 메시지를 사용하고 자신의 '버블'또는 오류 메시지 상자에서 상속하기 위해 몇 가지 펑키 한 작업을 수행 할 수 있습니다.
var form = $('form');
var item = form.find(':invalid').first();
var node = item.get(0);
var pos = item.position();
var message = node.validationMessage || 'Invalid value.';
var bubble = $('<span/>').html('<span class="formHintBubble" style="left: ' + pos.left + 'px; top:' + pos.top + 'px;">' + message + '<div class="cross">X</div></span>').contents();
bubble.insertAfter(item);
시험 :
http://jsfiddle.net/shannonhochkins/wJkVS/
즐기십시오. HTML5 양식 유효성 검사가 훌륭하고 다른 사람들을 돕고 싶습니다.
섀넌
이것은 @mhm이 제안한 솔루션의 구현으로 jQuery 사용을 버렸습니다.
변수 formId는 양식의 ID를 포함하고 msg는 내 애플리케이션의 메시지가있는 객체입니다.
이 구현은 기본 HTML 5 오류 메시지를 사용자에게 알리고 가능하지 않은 경우 일반 양식 오류 메시지를 경고합니다.
설치 오류가 발생합니다.
let applyForm = document.getElementById(formId);
if (!applyForm.checkValidity()) {
if (applyForm.reportValidity) {
applyForm.reportValidity();
} else {
alert(msg.ieErrorForm);
}
} else {
applyForm.submit();
}
form.submit ()이 작동하지 않아 양식 제출 전에 HTML5 유효성 검사가 수행됩니다. 제출 버튼을 클릭하면 HTML5 유효성 검사가 트리거되고 유효성 검사가 성공하면 양식이 제출됩니다.
더 간단하다고 생각합니다.
$('submit').click(function(e){
if (e.isValid())
e.preventDefault();
//your code.
}
양식이 유효 할 때까지 제출이 중지됩니다.
다른 답변에서 언급했듯이 양식 제출을 방지하기 위해 event.preventDefault ()를 사용하십시오.
작은 jQuery 함수를 작성하기 전에 양식을 확인하려면 사용할 수 있습니다 (요소에는 ID가 필요합니다!)
(function( $ ){
$.fn.isValid = function() {
return document.getElementById(this[0].id).checkValidity();
};
})( jQuery );
예제 사용
$('#submitBtn').click( function(e){
if ($('#registerForm').isValid()){
// do the request
} else {
e.preventDefault();
}
});
나는 사용하고 있었다
objectName.addEventListener('click', function() {
event.preventDefault();
}
하지만 표시 오류 " event is undefined "이 경우에는 다음과 같은 이벤트 매개 변수를 사용합니다.
objectName.addEventListener('click', function(event) {
event.preventDefault();
}
이제 잘 작동합니다
나는 그것이 오래된 주제라는 것을 알고 있지만 매우 복잡한 (특히 비동기) 유효성 검사 프로세스가있는 경우 간단한 해결 방법이 있습니다.
<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
var form1 = document.forms['form1']
if (!form1.checkValidity()) {
$("#form1_submit_hidden").click()
return
}
if (checkForVeryComplexValidation() === 'Ok') {
form1.submit()
} else {
alert('form is invalid')
}
}
</script>
이 함수가 입력 유효성 검사를 호출하는 HTMLFormElement.reportValidity ()를 사용해보십시오.
'ProgramingTip' 카테고리의 다른 글
| ASPXAUTH 쿠키 란 무엇입니까? (0) | 2020.10.30 |
|---|---|
| XmlSerializer를 사용하여 빈 xml 속성 값을 nullable int 속성으로 역화 화 (0) | 2020.10.30 |
| 포함 할 PHP 전달 변수 (0) | 2020.10.30 |
| 명령 줄에서 CMake 옵션 ()을 설정하는 방법 (0) | 2020.10.30 |
| IEnumerator는 왜 (0) | 2020.10.30 |