jQuery를 통해 제출하지 않고 HTML5 양식 유효성 검사를 수행하는 방법

내 앱 에이 양식이 있으며 AJAX를 통해 제출하지만 클라이언트 측 유효성 검사에 HTML5를 사용하고 싶습니다. 따라서 jQuery를 통해 양식 유효성 검사를 강제로 수행 할 수 있기를 원합니다.

양식을 제출하지 않고 유효성 검사를 시작하고 싶습니다. 가능합니까?

특정 필드가 유효한지 확인하려면 다음을 사용하십시오.

$('#myField')[0].checkValidity(); // returns true/false

양식이 유효한지 확인하려면 다음을 사용하십시오.

$('#myForm')[0].checkValidity(); // returns true/false

불행히도 일부 브라우저에있는 기본 오류 메시지 (예 : Chrome)를 표시하려면 다음과 같이 양식을 제출하면됩니다.

var $myForm = $('#myForm');

if(! $myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.find(':submit').click();
}

도움이 되었기를 바랍니다. 일부 브라우저에서는 HTML5 유효성 검사가 지원되지는 않습니다.

이 솔루션이 저에게 효과적이라는 것을 알았습니다. 다음과 같이 자바 스크립트 함수를 호출하십시오.

action="javascript:myFunction();"

그런 다음 html5 유효성 검사가 있습니다 ... 정말 간단합니다 :-)

    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

부터 : html5 양식 유효성 검사

아래 코드는 저에게 효과적입니다.

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});

좀 더 깔끔한 일반적인 방법은 다음과 같습니다.

다음과 같이 양식을 작성하십시오 (아무 것도하지 않는 더미 양식 일 수 있음).

<form class="validateDontSubmit">
...

제출하고 싶지 않은 모든 양식을 바인드하십시오.

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

이제 클릭하면 양식의 유효성을 검사하려는 <a>(안에 있음 <form>)이 있다고 가정 해 보겠습니다.

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

몇 가지 참고 사항 :

• 유효성 검사를 위해 실제로 양식을 제출할 필요는 없습니다. 호출 checkValidity()은 충분합니다 (적어도 크롬에서는). 다른 브라우저에서이 이론을 테스트하면서 의견을 추가 할 수 있다면이 답변을 업데이트하겠습니다.
• 유효성 검사를 트리거하는 것은 내에 있어야 할 필요는 없습니다 <form>. 이것은 범용 솔루션을위한 깨끗하고 유연한 방법입니다.

파티에 늦을 수도 있지만 어떻게 든 비슷한 문제를 해결하는 동안이 질문을 찾았습니다. 이 페이지의 코드가 나를 위해 작동하지 않았으므로 지정된대로 작동하는 솔루션을 생각해 냈습니다.

문제는 <form>DOM에 단일 <button>요소가 포함 되면 한 번 실행되면 <button>자동으로 양식을 요약 하는 것입니다. AJAX를 사용하는 경우 기본 동작을 방지해야합니다. 그러나 문제가 있습니다. 그렇게하면 기본 HTML5 유효성 검사도 방지 할 수 있습니다. 따라서 양식이 유효한 경우에만 해당 버튼의 기본값을 방지하는 것이 좋습니다. 그렇지 않으면 HTML5 유효성 검사로 인해 제출이 보호됩니다. jQuery checkValidity()는 다음과 같이 도움이 될 것입니다.

jQuery :

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

위에서 설명한 코드를 사용하면 양식을 제출하지 않고도 기본 HTML5 유효성 검사 (유형 및 패턴 일치)를 사용할 수 있습니다.

javascript / jquery를 사용하여 "HTML5 유효성 검사"와 HTML 양식의 유효성 검사에 대해 두 가지로 이야기합니다.

HTML5에는 양식의 유효성을 검사하기위한 기본 제공 옵션이 있습니다. 필드에서 "필수"속성을 사용하는 것과 같이 (브라우저 구현에 따라) javascript / jquery를 사용하지 않고 양식 제출에 실패 할 수 있습니다.

javascrip / jquery를 사용하면 다음과 같이 할 수 있습니다

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});

var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}

제출 버튼을 사용하지 않고 필요한 모든 양식 필드를 확인하려면 아래 기능을 사용할 수 있습니다.

컨트롤에 필요한 속성 을 할당 해야 합니다.

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });

이를 달성하기 위해 jQuery가 필요하지 않습니다. 양식에 다음을 추가하십시오.

onsubmit="return buttonSubmit(this)

또는 JavaScript로 :

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

당신의에서 buttonSubmit기능 (또는 whatver 당신이 그것을 전화), 당신은 AJAX를 사용하여 양식을 제출할 수 있습니다. buttonSubmitHTML5에서 양식의 유효성이 검사 된 경우에만 호출됩니다.

이것이 누군가를 돕는 경우, 내 buttonSubmit기능은 다음과 같습니다.

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

내 양식 중 일부에는 여러 제출 버튼이 포함되어 있으므로이 줄이 있습니다 if (submitvalue == e.elements[i].value). submitvalue클릭 이벤트 사용 의 가치를 설정했습니다 .

다른 상황을 처리하기 위해 여러 제출 버튼이 필요한 다소 복잡한 상황이있었습니다. 예를 들어, 저장 및 삭제.

기본은 그것이 눈에 거슬리지 않았기 때문에 정상적인 버튼으로 만들 수 없었습니다. 그러나 html5 유효성 검사를 활용하고 싶었습니다.

또한 사용자가 입력을 눌러 예상 기본 제출을 트리거 할 경우 제출 이벤트가 대체되었습니다. 이 예에서는 저장하십시오.

제출 및 클릭 이벤트 모두에서 자바 스크립트와 함께 또는 HTML5 유효성 검사와 함께 작동하도록 양식을 처리하는 노력은 다음과 같습니다.

jsFiddle 데모-제출 및 클릭 재정의를 사용한 HTML5 유효성 검사

xHTML

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

자바 스크립트

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

자바 스크립트 사용시주의 할 점은 코드에서 각 브라우저를 지원하지 않고 오류 메시지를 표시하려면 브라우저의 기본 onclick이 제출 이벤트로 전파되어야한다는 것입니다. 그렇지 않으면 click 이벤트가 event.preventDefault ()로 재정의되거나 false를 반환하면 브라우저의 제출 이벤트로 전파되지 않습니다.

지적해야 할 것은 일부 브라우저에서는 사용자가 Enter 키를 누를 때 양식 제출을 트리거하지 않고 대신 양식의 첫 번째 제출 버튼을 트리거한다는 것입니다. 따라서 console.log ( 'form submit')이 트리거되지 않음을 표시합니다.

양식을 제출하지 않고도 할 수 있습니다.

예를 들어, ID가 "search"인 양식 제출 단추가 다른 양식 인 경우. 해당 제출 버튼에서 클릭 이벤트를 호출 한 후 ev.preventDefault를 호출 할 수 있습니다. 제 경우에는 양식 A 제출에서 양식 B의 유효성을 검사합니다. 이렇게

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}

이 방법은 저에게 효과적입니다.

1. 에 onSubmit속성을 추가 하고 값 form에 포함하는 것을 잊지 마십시오 return.

   <form id='frm-contact' method='POST' action='' onSubmit="return contact()">

2. 기능을 정의하십시오.

   function contact(params) {
       $.ajax({
           url: 'sendmail.php',
           type: "POST",
           dataType: "json",
           timeout: 5000,
           data: { params:params },
           success: function (data, textStatus, jqXHR) {
               // callback
           },
           error: function(jqXHR, textStatus, errorThrown) {
               console.log(jqXHR.responseText);
           }
       });
   
       return false;
   }

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

가장 좋은 대답은 아니지만 나를 위해 일합니다.

나는 이것이 이미 답변되었지만 다른 가능한 해결책이 있음을 알고 있습니다.

jquery를 사용하는 경우이 작업을 수행 할 수 있습니다.

먼저 jquery에서 몇 가지 확장을 작성하여 필요에 따라 재사용 할 수 있도록하십시오.

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

그런 다음 사용하려는 곳에서 이와 같은 작업을 수행하십시오.

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>

$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

이것은 양식 유효성 검사와 함께 기본 HTML 5 오류 메시지 를 표시하기 위해 작동했습니다 .

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

참고 : RegForm은 form id입니다.

참고

희망은 누군가를 돕는다.

이것은 HTML5가 모든 양식에 대한 유효성 검사를 수행하는 동시에 양식에 대한 최신 JS 제어를 유지하는 매우 직접적인 방법입니다. 유일한주의 사항은 제출 버튼이<form> 입니다.

html

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

js

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}

최선의 방법이라고 생각합니다

사용됩니다 jQuery를 확인을양식 유효성 검사에 모범 사례를 사용 플러그인을 사용하며 브라우저 지원 기능도 우수합니다. 따라서 브라우저 호환성 문제에 대해 걱정할 필요가 없습니다.

그리고 jQuery validation valid () 함수를 사용하여 선택한 양식이 유효한지 또는 선택한 모든 요소가 양식을 제출하지 않고 유효한지 여부를 검사 할 수 있습니다 .

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>

질문에 따르면 html5 유효성은 처음에는 jQuery를 사용하여 유효성을 검사해야하며 대부분의 답변에서는 발생하지 않으며 그 이유는 다음과 같습니다.

html5 양식의 기본 기능을 사용하여 유효성을 검사하는 동안

checkValidity();// returns true/false

우리는 jQuery가 객체 배열을 반환한다는 것을 이해해야합니다.

$("#myForm")

따라서 checkValidity () 함수가 작동하도록 첫 번째 색인을 지정해야합니다

$('#myForm')[0].checkValidity()

다음은 완벽한 솔루션입니다.

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}