입력 유형이 "제출"이 아닌 경우 HTML5 유효성 검사

입력 유형이 "제출"이 아닌 경우 HTML5 유효성 검사

---

필드 유효성 검사에 HTML5를 사용하고 있습니다. 버튼 클릭시 JavaScript를 사용하여 양식을 제출하고 있습니다. 그러나 HTML5 유효성 검사는 작동하지 않습니다. 입력 유형이 인 경우에만 작동합니다 submit. JavaScript 유효성 검사를 사용하거나 유형을 다음으로 변경하는 것 외에 다른 작업을 수행 할 수 있습니까 submit?

다음은 HTML 코드입니다.

<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>

함수에서 양식을 제출하고 있습니다 submitform().

---

HTML5 양식 유효성 검사 프로세스는 제출 버튼을 통해 양식이 제출되는 상황으로 제한됩니다. 양식 제출 알고리즘은 명시 적으로 형태는을 통해 제출하면 검증이 수행되지 않는 것을 말한다 submit()방법. 분명히 아이디어는 JavaScript를 통해 양식을 제출하면 유효성 검사를 수행해야한다는 것입니다.

그러나 checkValidity()메서드를 사용하여 HTML5 속성에 정의 된 제약 조건에 대해 (정적) 양식 유효성 검사를 요청할 수 있습니다 . 브라우저가 HTML5 양식 유효성 검사에서 수행하는 것과 동일한 오류 메시지를 표시하려면 validityMessage속성이 양식이 아니라 필드 (컨트롤) 의 속성 이기 때문에 모든 제한된 필드를 확인해야합니다 . 단일 제한 필드의 경우 제시된 경우와 같이 당연히 이것은 사소한 일입니다.

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.checkValidity()) {
    f.submit();
  } else {
    alert(document.getElementById('example').validationMessage);
  }
}

---

늦었을 수도 있지만 내가 한 방법은 숨겨진 제출 입력을 만들고 제출할 때 클릭 처리기를 호출하는 것이 었습니다. 다음과 같은 것 (간단 함을 위해 jquery 사용) :

<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>
<input id="submit_handle" type="submit" style="display: none">

<script>
function submitform() {
    $('#submit_handle').click();
}
</script>

---

입력 내용을 묶는 양식 태그를 사용해야합니다. 입력 유형 제출.
작동합니다.

<form id="testform">
<input type="text" id="example" name="example"  required>
<button type="submit"  onclick="submitform()" id="save">Save</button>
</form>

HTML5 유효성 검사는 제출 버튼에서만 작동하므로 그대로 두어야합니다. 양식에 대한 이벤트 처리기를 작성하여 기본 동작을 방지함으로써 유효한 경우 양식 제출을 피할 수 있습니다.

document.getElementById('testform').onsubmit= function(e){
     e.preventDefault();
}

이것은 유효하지 않은 경우 유효성을 확인하고 유효하면 양식을 제출하지 않습니다.

---

와 시도 <button type="submit">의 기능을 수행 할 수 있습니다 submitform()수행하여<form ....... onsubmit="submitform()">

---

최근에 만난 새로운 방법을 추가하고 싶었습니다. submit()메서드를 사용하여 양식을 제출할 때 양식 유효성 검사가 실행되지 않더라도 프로그래밍 방식으로 제출 단추를 클릭하는 것을 막을 수는 없습니다. 숨겨져 있어도.

양식 :

<form>
    <input type="text" name="title" required />
    <button style="display: none;" type="submit" id="submit-button">Not Shown</button>
    <button type="button" onclick="doFancyStuff()">Submit</button>
</form>

그러면 양식 유효성 검사가 트리거됩니다.

function doFancyStuff() {
    $("#submit-button").click();
}

또는 jQuery없이

function doFancyStuff() {
    document.getElementById("submit-button").click();
}

In my case, I do a bunch of validation and calculations when the fake submit button is pressed, if my manual validation fails, then I know I can programmatically click the hidden submit button and display form validation.

Here's a VERY simple jsfiddle showing the concept:

https://jsfiddle.net/45vxjz87/1/

---

Either you can change the button type to submit

<button type="submit"  onclick="submitform()" id="save">Save</button>

Or you can hide the submit button, keep another button with type="button" and have click event for that button

<form>
    <button style="display: none;" type="submit" >Hidden button</button>
    <button type="button" onclick="submitForm()">Submit</button>
</form>

---

HTML5 Validation Work Only When button type will be submit

change --

<button type="button"  onclick="submitform()" id="save">Save</button>

To --

<button type="submit"  onclick="submitform()" id="save">Save</button>

---

Try this out:

<script type="text/javascript">
    function test
    {
        alert("hello world");  //write your logic here like ajax
    }
</script>

<form action="javascript:test();" >
    firstName : <input type="text" name="firstName" id="firstName" required/><br/>
    lastName : <input type="text" name="lastName" id="lastName" required/><br/>
    email : <input type="email" name="email" id="email"/><br/>
    <input type="submit" value="Get It!" name="submit" id="submit"/>
</form>

---

2019 update: Reporting validation errors is now made easier than a the time of the accepted answer by the use of HTMLFormElement.reportValidity() which not only checks validity like checkValidity() but also reports validation errors to the user.

The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.

Updated solution snippet:

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.reportValidity()) {
    f.submit();
  }
}

참고URL : https://stackoverflow.com/questions/16707743/html5-validation-when-the-input-type-is-not-submit