HTML 양식을 jQuery를 통해 제출하지 않고 강제로 유효성을 검사하는 방법

HTML 양식을 jQuery를 통해 제출하지 않고 강제로 유효성을 검사하는 방법

제 앱에 이 양식이 있고 AJAX를 통해 제출할 예정이지만 클라이언트 측 검증을 위해 HTML을 사용하고 싶습니다.따라서 jQuery를 통해 양식 유효성 검사를 강제로 수행할 수 있습니다.

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

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

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

양식이 유효한지 확인하려면 다음을 사용합니다.

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

html5 기본 제공 오류 표시

if (! $('#myForm')[0].checkValidity()) {
      $('#myForm')[0].reportValidity()
}

HTML5 유효성 검사는 현재까지 일부 브라우저에서 지원되지 않습니다.

아래 코드는 나에게 효과가 있습니다.

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

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

});

저는 제게 맞는 해결책을 찾았습니다.다음과 같은 자바스크립트 함수를 호출하면 됩니다.

action="javascript:myFunction();"

그러면 html5 인증을 받게 됩니다.정말 간단합니다 :-)

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

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

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

원본: html5 양식 유효성 검사

다음은 좀 더 일반적인 방법입니다.

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

<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>이는 범용 솔루션을 구축하기 위한 깨끗하고 유연한 방법일 뿐입니다.

2022 바닐라 JS 솔루션

Pure JavaScript는 이에 필요한 모든 기능을 갖추고 있습니다.질문이 jQuery에 관한 것이었다는 것을 알지만, jQuery가 있는 답변들도 이러한 기능들을 사용합니다.checkValidity()그리고.reportValidity().

전체 양식 테스트

let form = document.getElementById('formId');
// Eventlistener can be another event and on another DOM object this is just an example
form.addEventListener('submit', function (event) {
    // Only needed if event is submit, otherwise this line can be skipped 
    event.preventDefault();

    // This is the important part, test if form is valid
    if (form.checkValidity() === false){
        // This is the magic function that displays the validation errors to the user
        form.reportValidity();   
        return; 
    }

    // Code if all fields are valid; continue form submit or make Ajax call.
})

테스트별 필드

checkValidity()그리고.reportValidity()양식뿐만 아니라 특정 필드에서도 사용할 수 있습니다.필요 없는 경우 양식이나 더미 제출 단추를 만들 필요가 없습니다.

// Get field of interest
let inputElement = document.querySelector("[name='" + inputName + "']");
// Check if the element is valid
if (inputElement.checkValidity() === false){
    // If not, show the errors to the user
    inputElement.reportValidity();
    return;
}

// Nothing? Great, continue to the Ajax call or whatever

이 기능은 이벤트 청취자가 호출하는 기능을 사용해야 의미가 있습니다.

파티에 늦었을 수도 있지만 어떻게든 비슷한 문제를 해결하려다 이 질문을 발견했습니다.이 페이지의 어떤 코드도 저에게 맞지 않았기 때문에, 저는 지정된 대로 작동하는 해결책을 생각해냈습니다.

문제는 다음과 같은 경우입니다.<form>은 단일 DOM을 합니다.<button> 요소, 즉 일단, 면발되, 것그.<button>양식을 자동으로 제출합니다.만약 당신이 AJAX로 플레이한다면, 당신은 아마도 기본 동작을 방지해야 할 것입니다.하지만 문제점이 있습니다.이렇게 하면 기본적인 HTML5 유효성 검사도 방지할 수 있습니다.따라서 양식이 유효한 경우에만 해당 단추의 기본값을 방지하는 것이 좋습니다.그렇지 않으면 HTML5 유효성 검사를 통해 귀하가 제출하지 못하도록 보호합니다.jQuerycheckValidity()도움이 될 것입니다.

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 유효성 검사(유형 및 패턴 일치)를 사용할 수 있습니다.

당신은 "HTML5 유효성 검사"와 자바스크립트/jquery를 사용한 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)");

의 신의에서.buttonSubmitAJAX를 사용하여 양식을 제출할 수 있습니다. buttonSubmit의 양식이 html5에서 됩니다.

이것이 누군가에게 도움이 될 경우, 여기 내 것입니다.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클릭 이벤트를 사용합니다.

이 방법은 저에게 적합합니다.

1. 더하다onSubmit에 있는 form▁don▁to▁를 포함하는 것을 잊지 마세요.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;
   }
   

여러 가지 작업을 처리하기 위해 여러 개의 제출 버튼이 필요했던 다소 복잡한 상황이 있었습니다.예를 들어 저장 및 삭제합니다.

그 근거는 역시 눈에 거슬리지 않기 때문에 그냥 정상적인 버튼으로 만들 수 없다는 것이었습니다.하지만 html5 validation도 활용하고 싶었습니다.

또한 사용자가 Enter 키를 눌러 예상된 기본 제출을 트리거한 경우 제출 이벤트가 재정의되었습니다. 이 예제에서는 저장합니다.

다음은 javascript 및 html5 유효성 검사와 submit 및 click 이벤트 모두에서 작업하기 위한 양식 처리의 노력입니다.

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

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

일부 브라우저에서는 사용자가 Enter 키를 누를 때 양식 제출을 트리거하지 않고 양식의 첫 번째 제출 단추를 트리거합니다.따라서 트리거되지 않음을 나타내는 console.log('form submit')가 있습니다.

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

예를 들어, ID가 "search"인 양식 제출 단추가 다른 양식에 있는 경우, 해당 제출 단추에서 click event를 호출하고 ev.proventDefault를 호출할 수 있습니다.나의 경우, 나는 A 양식 제출에서 B 양식을 검증합니다.이것처럼.

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

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

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

$("#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>

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

제이에스

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

이것은 양식 유효성 검사와 함께 네이티브 HTML 5 오류 메시지를 표시하는 데 도움이 되었습니다.

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


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

  if (!this.checkValidity())
  {
    // 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.

언급

희망은 누군가를 돕습니다.

가장 좋은 방법은

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

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

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

언급URL : https://stackoverflow.com/questions/11866910/how-to-force-an-html-form-to-validate-without-submitting-it-via-jquery