복붙노트

[JQUERY] 어떻게 jQuery를 통해 제출하지 않고 HTML5 양식 유효성 검사를 강제로

JQUERY

어떻게 jQuery를 통해 제출하지 않고 HTML5 양식 유효성 검사를 강제로

해결법

  1. 1.특정 필드가 유효 사용 여부를 확인하려면 :

    특정 필드가 유효 사용 여부를 확인하려면 :

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

    형태가 유효 사용 있는지 확인하려면 :

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

    일부 브라우저 (예 : 크롬으로)과 같이 양식을 제출하다 할 불행하게도 유일한 방법이있는 원시 오류 메시지를 표시하려면 :

    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 유효성 검사가 모든 브라우저에서 지원되지 않습니다 있음을 유의하십시오.

  2. 2.나를 위해 일에이 솔루션을 발견했다. 다만이 같은 자바 스크립트 함수를 호출 :

    나를 위해 일에이 솔루션을 발견했다. 다만이 같은 자바 스크립트 함수를 호출 :

    행동 = "자바 스크립트 :하여 myFunction ();"

    그런 다음 HTML5 유효성 검사를 가지고 ... 정말 간단 :-)

  3. 3.

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

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

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

    에서 : HTML5 폼 유효성 검사

  4. 4.나를 위해 코드 작품 아래,

    나를 위해 코드 작품 아래,

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

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

});

  5. 5.여기에 비트 청소기보다 일반적인 방법입니다 :

    여기에 비트 청소기보다 일반적인 방법입니다 :

    (아무것도하지 않는 더미의 형태 일 수있다)과 같은 양식을 만듭니다

    <form class="validateDontSubmit">
...

    바인딩 모든 형태의 당신은 정말 제출할 해달라고 :

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

    지금하는 양식을 확인하려면 클릭 당신이 (의 <형식> 내)을 이 있다고 할 수 있습니다 :

    $('#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'
});

    몇 가지주의 사항 여기 :

  6. 6.파티에 늦을 수 있지만, 비슷한 문제를 해결하는 동안 아직 어떻게 든이 질문을 찾을 수 있습니다. 나를 위해 일한이 페이지에서 어떤 코드로, 그 사이에 내가 지정한대로 작동 솔루션을 함께했다.

    파티에 늦을 수 있지만, 비슷한 문제를 해결하는 동안 아직 어떻게 든이 질문을 찾을 수 있습니다. 나를 위해 일한이 페이지에서 어떤 코드로, 그 사이에 내가 지정한대로 작동 솔루션을 함께했다.

    당신의

    DOM은 하나의 <버튼> 요소를 포함 할 때 문제가 한 번 그 <버튼>, 발사 자동으로 양식을 작성합니다. 당신이 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 유효성 검사를 사용할 수 위의 설명.

  7. 7.당신은 자바 스크립트 / JQuery와 사용하여 다른 두 가지 "HTML5 유효성 검사"및 HTML 양식의 검증 이야기.

    당신은 자바 스크립트 / JQuery와 사용하여 다른 두 가지 "HTML5 유효성 검사"및 HTML 양식의 검증 이야기.

    HTML5 기능이 내장되어 "있다"양식을 검증하기위한 옵션을 제공합니다. 이러한 (브라우저 구현을 기반으로) 할 수있는 필드의 "요구"속성을 사용하는 등 자바 스크립트 / JQuery와 사용하지 않고 양식 제출을 실패합니다.

    이 같은 자바 스크립트 / JQuery와 당신이 할 수있는 뭔가

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

  8. 8.

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

  9. 9.당신은 아래와 같은 기능을 사용할 수 있습니다 제출 '버튼을 사용하지 않고 양식의 모든 필수 필드를 확인합니다.

    당신은 아래와 같은 기능을 사용할 수 있습니다 제출 '버튼을 사용하지 않고 양식의 모든 필수 필드를 확인합니다.

    당신은 컨트롤에 필요한 속성을 지정해야합니다.

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

  10. 10.이 작업을 달성하기 위해 jQuery를 필요가 없습니다. 양식 담기 :

    이 작업을 달성하기 위해 jQuery를 필요가 없습니다. 양식 담기 :

    onsubmit="return buttonSubmit(this)

    또는 자바 스크립트 :

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

    당신의 buttonSubmit 기능 (또는 whatver 당신이 그것을 호출)에서는 AJAX를 사용하여 양식을 제출할 수 있습니다. 양식은 HTML5로 확인되는 경우 buttonSubmit에만 호출되는 것입니다.

    경우이 여기, 사람을 도움이 내 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;
}

    제 형태의 일부는 다중 전송 버튼을 포함하고, 따라서,이 경우 라인 (submitvalue == e.elements [I] .value). 내가 클릭 이벤트를 사용 submitvalue의 값을 설정합니다.

  11. 11.나는 여러 다른 일들을 처리하기 버튼을 제출이 필요 다소 복잡한 상황을 가지고 있었다. 예를 들어, 저장 및 삭제하십시오.

    나는 여러 다른 일들을 처리하기 버튼을 제출이 필요 다소 복잡한 상황을 가지고 있었다. 예를 들어, 저장 및 삭제하십시오.

    기초는 난 그냥 보통의 버튼을 만들 수 없습니다, 그래서 그것은 또한 눈에 거슬리지이었다이었다. 뿐만 아니라 HTML5 유효성 검사를 활용하고 싶었다.

    잘 제출 이벤트의 경우에서 재정의되었을 때 사용자가 예상 기본 제출을 트리거 입력 눌러 진; 이 예에서 저장합니다.

    여기에 모두 입력하고 클릭 이벤트와와 / 자바 스크립트없이 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을 코드에서 각 브라우저를 지원하지 않고 오류 메시지를 표시하기 위해 발생해야 제출 이벤트에 전파해야한다는 것입니다. 그렇지 않으면 클릭 이벤트가에서는 event.preventDefault와 오버라이드 (override)하는 경우는 ()하거나 브라우저의 전파하지 않습니다 반환 거짓 이벤트를 제출합니다.

    지적 할 점은 사용자가 Enter 키를 누를 때 양식을 트리거하지 않습니다 일부 브라우저에서 대신이 처음 형태로 제출 '버튼을 트리거, 제출하는 것입니다. 따라서 ( '양식 제출')가 트리거되지 않는다는 것을 보여주기 위해 CONSOLE.LOG이있다.

  12. 12.당신은 양식을 제출하지 않고 그것을 할 수 있습니다.

    당신은 양식을 제출하지 않고 그것을 할 수 있습니다.

    양식 ID로 버튼을 제출하는 경우 예를 들어, "검색"다른 형태입니다. 당신은 그 후 버튼을 호출 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
}

  13. 13.이 방법은 나를 위해 잘 작동합니다 :

    이 방법은 나를 위해 잘 작동합니다 :

  14. 14.

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

    하지 않는 가장 좋은 대답하지만 나를 위해 작동합니다.

  15. 15.나는이 이미 답을 알지만, 나는 또 다른 가능한 해결책을 가지고 있습니다.

    나는이 이미 답을 알지만, 나는 또 다른 가능한 해결책을 가지고 있습니다.

    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>

  16. 16.

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

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

  17. 17.이 양식 유효성 검사와 기본 HTML 5 오류 메시지를 표시 할 날을 형성했다.

    이 양식 유효성 검사와 기본 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 양식 ID입니다.

    참고

    희망은 사람을 도움이됩니다.

  18. 18.이것은 여전히 ​​양식을 통해 현대 JS 제어를하면서 HTML5는 어떤 형태에 대한 유효성 검사를 수행 갖는 매우 똑 바른 앞으로 방법입니다. 주의해야 할 점은이 버튼은 안에 있어야 제출합니다.

    이것은 여전히 ​​양식을 통해 현대 JS 제어를하면서 HTML5는 어떤 형태에 대한 유효성 검사를 수행 갖는 매우 똑 바른 앞으로 방법입니다. 주의해야 할 점은이 버튼은 안에 있어야 제출합니다.

    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...
}

  19. 19.내가 가장 좋은 방법을 생각한다

    내가 가장 좋은 방법을 생각한다

    윌 양식 유효성 검사를위한 최선의 방법을 사용하여 jQuery를 검증 플러그인을 사용하고 또한 좋은 브라우저 지원을하고 있습니다. 그래서 당신은 브라우저 호환성 문제에 대해 걱정할 필요가 없습니다.

    그리고 선택된 형태가 유효 또는 모든 선택된 요소의 형식을 제출하지 않고 유효한지 여부를 점검 jQuery를 검증 유효 () 함수를 사용할 수있다.

    <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>

  20. 20.질문 HTML5 유효성에 따르면 처음에는이 안될 답과 그 이유의 대부분에서 jQuery를 사용하여 검증 할 수 있어야하는 것은 다음과 같습니다 :

    질문 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);}
        });
    }
}

    21. from https://stackoverflow.com/questions/11866910/how-to-force-a-html5-form-validation-without-submitting-it-via-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] Ajax 요청의 내용 유형 및 데이터 형식은 무엇입니까?  (0) 2020.10.09
[JQUERY] jQuery를, 간단한 폴링 예  (0) 2020.10.09
[JQUERY] 오른쪽에서 왼쪽으로 밀어?  (0) 2020.10.09
[JQUERY] 트위터 부트 스트랩 모달 닫기에 함수를 바인딩  (0) 2020.10.09
[JQUERY] jQuery를 선택기 : 아이디 끝?  (0) 2020.10.09
,

티스토리툴바