jQuery Validation 플러그인: 지정된 제출 단추에 대해 유효성 검사 사용 안 함

jQuery Validation 플러그인: 지정된 제출 단추에 대해 유효성 검사 사용 안 함

Jörn Zaeffere의 우수한 jQuery Validation 플러그인을 사용하여 여러 필드를 검증 중인 양식이 있습니다(일부는 사용자 지정 유효성 검사를 위해 추가된 메서드도 있음).지정된 제출 제어를 사용하여 유효성 검사를 회피하는 방법(즉, 일부 제출 입력을 사용하여 유효성 검사를 수행하지만 다른 입력은 유효성 검사를 수행하지 않음)은 무엇입니까?이는 표준 ASP를 사용하는 검증 그룹과 유사합니다.NET 유효성 검사기 컨트롤.

내 상황:

ASP에 있습니다.NET WebForms. 그러나 원하는 경우 무시할 수 있습니다.그러나 저는 검증을 "권장사항"으로 더 많이 사용하고 있습니다. 즉, 양식을 제출하면 검증이 실행되지만 "필수" 메시지가 표시되는 대신 "권장사항"에 "다음 필드를 놓쳤습니다..."라는 문구가 표시됩니다.그래도 계속 진행하시겠습니까?"이 시점에서 오류 컨테이너의 다른 제출 버튼을 누르면 유효성 검사를 무시하고 제출할 수 있습니다.이 버튼 제어를 위해 .validate() 양식을 우회하고 게시하는 방법은 무엇입니까?

http://jquery.bassistance.de/validate/demo/multipart/ 의 Buy and Sell a House 샘플은 이전 링크에 도달하기 위해 이것을 허용하지만, 사용자 지정 방법을 만들고 이를 Validator에 추가함으로써 그렇게 합니다.유효성 검사 플러그인에 이미 있는 기능을 복제하는 사용자 지정 메서드를 만들지 않았으면 합니다.

다음은 바로 적용 가능한 스크립트의 단축 버전입니다.

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 확인을 합니다.

예

<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

입력에 양식 novalid 특성 추가

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

class="class"를 추가하는 것은 이제 더 이상 사용되지 않습니다.

이 링크에서 제출 시 유효성 검사 건너뛰기에 대한 문서를 참조

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

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

참고로 ASP에서도 jquery validation을 사용하고 있습니다.NET 웹 양식.탐색해야 할 몇 가지 문제가 있지만 일단 해결하면 사용자 환경이 매우 좋습니다.

)@lepe의 모래@redsquare의 책임이 있는.ASP.NET MVC+jquery.validate.unobtrusive.js)

---

jquery 유효성 검사 플러그인(Microsoft의 방해가 되지 않는 플러그인이 아님)을 사용하여.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"/>

(이것과 완전히 다른 것을 혼동하지 마세요)

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

이 제가생것당은여신기에이낸각해여를 넣을 수 있도록 해 낸 입니다..cancel위와 같이 제출 버튼에 표시됩니다.Microsoft에서 이 문제를 '수정'한 경우 이 코드를 제거하면 됩니다.

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

이제 유효성 검사를 올바르게 건너뜁니다. :)

<button type="submit" formnovalidate="formnovalidate">submit</button>

역시 작동 중인

질문이지만 .$('#formId')[0].submit()이는 jQuery 개체 대신 돔 요소를 가져와 유효성 검사 후크를 바이패스합니다.이 단추는 입력이 포함된 상위 양식을 제출합니다.

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

또한, 당신이 가지고 있지 않은 것을 확인하세요.input의 이름이 "module"이거나 이름이 지정된 함수를 재정의합니다.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.proventDefault();'를 수행하면 유효성 검사를 생략합니다.

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

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

언급URL : https://stackoverflow.com/questions/203844/jquery-validation-plugin-disable-validation-for-specified-submit-buttons