jQuery 유효성 검사 플러그인 : 지정된 제출 버튼에 대한 유효성 검사 비활성화

Jörn Zaeffere의 우수한 jQuery Validation 플러그인으로 여러 필드가있는 양식 (사용자 정의 유효성 검사를 위해 추가 된 메소드가있는 양식)이 있습니다. 지정된 제출 제어를 사용하여 유효성 검증을 어떻게 우회합니까 (즉, 일부 제출 입력으로 유효성 검증을 수행하지만 다른 유형으로 유효성 검증을 수행하지는 않음)? 표준 ASP.NET 유효성 검사기 컨트롤이있는 ValidationGroups와 비슷합니다.

내 상황 :

ASP.NET WebForms와 함께 제공되지만 원하는 경우 무시해도됩니다. 그러나 유효성 검사를 "권장"으로 더 많이 사용하고 있습니다. 즉, 양식을 제출하면 유효성 검사가 시작되지만 "필수"메시지가 표시되는 대신 "권장"은 "사용자" 다음 필드를 놓쳤습니다. 계속 진행 하시겠습니까? " 오류 컨테이너의 해당 시점에는 유효성 검사를 무시하고 어쨌든 제출할 수있는 다른 제출 단추가 표시됩니다. 이 버튼 컨트롤의 .validate () 양식을 우회하고 여전히 게시하는 방법은 무엇입니까?

http://jquery.bassistance.de/validate/demo/multipart/에 있는 주택 매입 및 매도 샘플 은 이전 링크에 도달하기 위해이를 허용하지만 사용자 정의 메소드를 작성하고 유효성 검증기에 추가하여이를 수행합니다. 유효성 검사 플러그인에 이미 기능을 복제하는 사용자 지정 메서드를 만들지 않고 싶습니다.

다음은 바로 지금 적용 할 수있는 즉시 적용 가능한 스크립트의 단축 버전입니다.

var container = $("#<%= Form.ClientID %> div.validationSuggestion");

$('#<%= Form.ClientID %>').validate({          
    errorContainer: container,
    errorLabelContainer: $("ul",container),
    rules: {
        <%= YesNo.UniqueID %>: { required: true },
        <%= ShortText.UniqueID %>: { required: true } // etc.

    },
    messages: {
        <%= YesNo.UniqueID %>: 'A message.',
        <%= ShortText.UniqueID %>: 'Another message.' // etc.
    },
    highlight: function(element, errorClass) {
        $(element).addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass("valid");
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass("valid");
    },
    wrapper: 'li'
}); 

cancel제출 버튼에 CSS 클래스를 추가 하여 유효성 검사를 억제 할 수 있습니다.

예 :

<input class="cancel" type="submit" value="Save" />

이 기능의 jQuery Validator 문서를 참조하십시오 : 제출시 유효성 검사 건너 뛰기

편집 :

위의 기술은 더 이상 사용되지 않으며 formnovalidate속성으로 대체되었습니다 .

<input formnovalidate="formnovalidate" type="submit" value="Save" />

그것을하는 다른 (문서화되지 않은) 방법은 전화하는 것입니다.

$("form").validate().cancelSubmit = true;

버튼의 클릭 이벤트 (예 :

또 다른 (동적) 방법 :

$("form").validate().settings.ignore = "*";

다시 활성화하려면 기본값을 다시 설정하십시오.

$("form").validate().settings.ignore = ":hidden";

출처 : https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

입력에 formnovalidate 속성 추가

    <input type="submit" name="go" value="Submit"> 
    <input type="submit" formnovalidate name="cancel" value="Cancel"> 

class = "cancel"추가는 더 이상 사용되지 않습니다.

이 링크 에서 제출시 유효성 검사 건너 뛰기 관련 문서를 참조하십시오

양식을 제출할 때 유효성을 검사하지 않는 유효성 검사를 연결할 때 onsubmit : false 옵션 ( 문서 참조 )을 사용할 수 있습니다 . 그런 다음 ASP : 버튼에 OnClientClick = $ ( '# aspnetForm'). valid (); 양식이 유효한지 명시 적으로 확인하십시오.

위에서 설명한 옵트 아웃 대신 옵트 인 모델이라고 할 수 있습니다.

또한 ASP.NET WebForms와 함께 jquery 유효성 검사를 사용하고 있습니다. 탐색해야 할 몇 가지 문제가 있지만 일단 통과하면 사용자 경험이 매우 좋습니다.

(의 확장 @lepe및 +에 @redsquare대한 답변 )ASP.NET MVCjquery.validate.unobtrusive.js

JQuery와 유효성 검사 플러그인 (안 마이크로 소프트 방해 한) 당신이 넣을 수 있습니다 .cancel(허용 대답에서와 같이) 완전히 바이 패스 검증에 제출 버튼 클래스를.

 To skip validation while still using a submit-button, add a class="cancel" to that input.

  <input type="submit" name="submit" value="Submit"/>
  <input type="submit" class="cancel" name="cancel" value="Cancel"/>

(이와 type='reset'완전히 다른 무언가를 혼동하지 마십시오 )

불행히도 jquery.validation.unobtrusive.js유효성 검사 처리 (ASP.NET MVC) 코드는 jquery.validate 플러그인의 기본 동작을 망칩니다 .

.cancel위와 같이 제출 버튼 을 넣을 수 있도록 내가 생각해 낸 것입니다 . Microsoft가 이것을 '수정'하면이 코드를 remvoe 할 수 있습니다.

    // restore behavior of .cancel from jquery validate to allow submit button 
    // to automatically bypass all jquery validation
    $(document).on('click', 'input[type=image].cancel,input[type=submit].cancel', function (evt)
    {
        // find parent form, cancel validation and submit it
        // cancelSubmit just prevents jQuery validation from kicking in
        $(this).closest('form').data("validator").cancelSubmit = true;
        $(this).closest('form').submit();
        return false;
    });

참고 : 처음에 시도해도 작동하지 않는 것 같습니다. 서버에 라운드 트립하지 않고 오류가있는 서버 생성 페이지가 표시되는지 확인하십시오. 다른 방법으로 서버 측에서 유효성 검사를 무시해야합니다. 이렇게하면 오류없이 양식을 클라이언트 측에 제출할 수 있습니다 (대체 .ignore양식의 모든 항목에 속성을 추가하는 것임 ).

(참고 : button제출하기 위해 버튼을 사용하는 경우 선택기 에 추가해야 할 수도 있습니다 )

$("form").validate().settings.ignore = "*";

또는

$("form").validate().cancelSubmit = true;

그러나 사용자 정의 필수 유효성 검사기에서 성공하지 못했습니다. 제출을 동적으로 호출하려면이 코드로 가짜 숨겨진 제출 버튼을 만들었습니다.

var btn = form.children('input.cancel.fakeSubmitFormButton');
if (btn.length === 0) {
    btn = $('<input name="FakeCancelSubmitButton" class="cancel fakeSubmitFormButton hide" type="submit" formnovalidate value="FakeCancelSubmitButton" />');
    form.append(btn);
}
btn.click();

이제 유효성 검사를 올바르게 건너 뛰십시오. :)

이 질문은 오래되었지만 $('#formId')[0].submit()jQuery 객체 대신 dom 요소를 가져 와서 유효성 검사 후크를 우회하는 다른 방법을 사용했습니다 . 이 버튼은 입력이 포함 된 상위 양식을 제출합니다.

<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/>

또한 input"submit"이라는 이름이 없거나 named 함수를 재정의해야합니다 submit.

가장 유연한 방법은 JQuery를 사용하는 것입니다.

event.preventDefault():

예를 들어 제출하는 대신 리디렉션하려는 경우 다음을 수행 할 수 있습니다.

$("#redirectButton").click(function( event ) {
    event.preventDefault();
    window.location.href='http://www.skip-submit.com';
});

또는 데이터를 다른 엔드 포인트로 보낼 수 있습니다 (예 : 작업을 변경하려는 경우).

$("#saveButton").click(function( event ) {
    event.preventDefault();
    var postData = $('#myForm').serialize();
    var jqxhr = $.post('http://www.another-end-point.com', postData ,function() {
    }).done(function() {
        alert("Data sent!");
    }).fail(function(jqXHR, textStatus, errorThrown) {
        alert("Ooops, we have an error");
    })

'event.preventDefault ();'를 수행하면 검증을 우회합니다.

양식 제출을위한 두 개의 버튼이 있습니다. 저장 및 종료라는 버튼은 유효성 검사를 무시합니다.

$('.save_exist').on('click', function (event) {
            $('#MyformID').removeData('validator');
            $('.form-control').removeClass('error');
            $('.form-control').removeClass('required');                
            $("#loanApplication").validate().cancelSubmit = true;
            $('#loanApplication').submit();
            event.preventDefault();
});

여기 가장 간단한 버전이 있습니다. 누군가에게 도움이되기를 바랍니다.

$('#cancel-button').click(function() {
    var $form = $(this).closest('form');
    $form.find('*[data-validation]').attr('data-validation', null);
    $form.get(0).submit();
});