제출 버튼을 사용하지 않고 표준 HTML 유효성 검사(양식)를 트리거하시겠습니까?
제출 버튼을 사용하지 않고 양식으로 표준 HTML5 유효성 검사를 트리거할 수 있는 방법을 아는 사람?(JavaScript 또는 jQuery).
보내고 싶지 않습니다.POST/GET요청, 유효성 검사만 수행합니다.
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
}
}
(Validity가 더 나은 지원을 제공하지만 IE<10에서도 작동하지 않음을 확인합니다.)
몇 번의 조사 끝에, 당신의 질문에 대한 답이 되어야 할 다음과 같은 코드를 생각해 냈습니다. (최소한 저에게는 효과가 있었습니다.)
이 코드를 먼저 사용해봐요.$(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;
}
});
첫번째 유효하지 않은 입력에 초점을 맞출 것입니다.
이 질문에 대한 대답은 사용자가 원하는 것으로 보입니다.
간단한 요약: 제출에 대한 이벤트 처리기에서 호출event.preventDefault().
html5 validation이 작동하려면 양식을 제출해야 합니다.원하는 것을 얻을 수 있는 방법이 있습니다.코드 참조:
<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()을 사용하는 것은 저에게 효과가 없었습니다.그래서 숨겨진 제출 버튼을 만들었는데, 키업에서 트리거를 합니다.왜냐고 묻지 마세요.누군가가 분명히 밝혀줄 수 있을 겁니다.
이것은 jQuery의 사용을 포기한 @mhm에서 제안한 솔루션을 구현한 것입니다.
변수 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();
}
단답형, 아니요, 양식을 제출하기 전에 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를 사용하지 않는 경우 관리가 훨씬 쉽고 쓰기 쉽고 복잡하지 않습니다.참고: fiddle 예제에서 나는 이것이 컴파일 할 정확한 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 양식 검증은 훌륭하고, 그것은 밖으로 나와야 하므로 제가 다른 사람들을 도와주었으면 좋겠습니다!
섀넌
양식 제출 전에 HTML5 유효성 검사를 수행하므로 form.submit()이 작동하지 않습니다.제출 단추를 클릭하면 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()를 시도합니다.
제출 버튼을 사용하지 않고도 폼을 섹션별로 검증하는 재미있는 방법...어느 정도의
활성 섹션의 모든 입력에 대해 validity() 체크를 실행합니다.실패할 경우 submit button.click()을 클릭하여 브라우저의 내장 알림을 활성화합니다.
submit button만 실행하고 있기 때문에 장애가 감지된 경우 click()을(를) 클릭하여 양식을 실수로 양식을 제출하지 않습니다.
실제로 브라우저는 다음 섹션으로 진행하기 전에 사용자에게 알립니다.
html:
<form id="myform">
<div>
<input type="text" name="blah1" required />
<input type="text" name="blah2" required />
</div>
<div class="hidden">
<input type="text" name="blah3" required />
<input type="text" name="blah4" required />
</div>
<input type="button" id="nextbutton" name="nextbutton" value="Next" />
<input type="submit" id="submitbutton" name="send" value="Submit" />
</form>
자바스크립트:
var viewing = 0;
var formSection = document.getElementById("myform").getElementsByTagName("div");
var submitbutton = document.getElementById("submitbutton");
document.getElementById("nextbutton").onclick = function() {viewFormSection(viewing + 1);}
function sectionValid(section)
{
var tempInputs = formSection[section].querySelectorAll("input, select, textarea");
for(var i = 0; i < tempInputs.length; i++)
{
if(!tempInputs[i].checkValidity())
{
return false;
}
}
return true;
}
function viewFormSection(section)
{
//Validate the current section before proceeding.
if(!sectionValid(viewing))
{
submitbutton.click();
return false;
}
//Code that hides the current form section and shows the desired one.
viewing == section;
}
HTML은 초점을 맞출 수 없다는 것을 좋아하지 않기 때문에 아직 파악하지 못한 부분의 숨겨진 필드에 오류를 발생시킵니다.하지만 마지막 구역에 도착할 때쯤이면 더 이상 문제가 되지 않을 겁니다.
이는 Internet Explorer에서 작동하는 반면 reportValidity()는 작동하지 않습니다.
언급URL : https://stackoverflow.com/questions/7002230/trigger-standard-html-validation-form-without-using-submit-button
'source' 카테고리의 다른 글
| raspberry Pi가 아닌 production server에서 작동하는 mysql window 기능 (0) | 2023.10.18 |
|---|---|
| 일/월 보관(년미포함) (0) | 2023.10.18 |
| 각도를 개선하는 방법많은 수의 DOM 요소를 포함한 JS 성능 (0) | 2023.10.18 |
| jquery getResponseHeader는 항상 '정의되지 않음'을 반환합니까? (0) | 2023.10.18 |
| Spring Web MVC에서 Ajax JQuery를 사용하는 방법 (0) | 2023.10.18 |