jQuery validate로 유효성 검사를 수동으로 트리거하는 방법은?

jQuery validate로 유효성 검사를 수동으로 트리거하는 방법은?

저는 jQuery Validate로 오류 메시지를 보여주는 것을 포함하여 수동으로 validation을 트리거하고 싶습니다.

제가 이루고자 하는 시나리오는 다음과 같은 형태입니다.

<form>
 <input id=i1> <button id=b1>
 <input id=i2> <button id=b2>
</form>

클릭시b1,오직.i1검증해야 합니다.hen clickingb2,오직.i2검증해야 합니다.그러나 모든 필드는 게시해야 합니다.이거 어떻게 해요?에 대한 클릭 이벤트를 처리하려고 생각했습니다.b1/b2양식의 일부를 수동으로 확인할 수 있습니다.

저 라이브러리는 단일 요소에 대한 유효성 검사를 허용하는 것 같습니다.클릭 이벤트를 단추에 연결하고 다음을 시도해 보십시오.

$("#myform").validate().element("#i1");

여기에 있는 예:

https://jqueryvalidation.org/Validator.element

또는 다음을 간단히 사용할 수 있습니다.$('#myElem').valid()

if ($('#myElem').valid()){
   // will also trigger unobtrusive validation only for this element if in place 
   // add your extra logic here to execute only when element is valid
}

참고:validate()이 메서드를 사용하여 확인하기 전에 양식을 호출해야 합니다.

문서 링크 : https://jqueryvalidation.org/valid/

저의 접근 방식은 아래와 같습니다.이제 특정 확인란을 클릭/변경했을 때 양식의 유효성을 확인하고 싶었을 뿐입니다.

$('#myForm input:checkbox[name=yourChkBxName]').click(
 function(e){
  $("#myForm").valid();
}
)

설명서에 나와 있듯이, 폼 유효성 검사를 프로그래밍 방식으로 트리거하는 방법은 validator.form()을 호출하는 것입니다.

var validator = $( "#myform" ).validate();
validator.form();

버전 1.14 현재 문서화되지 않은 방법이 있습니다.

validator.checkForm()

이 메서드는 true/false 반환에 대해 자동으로 검증합니다.오류 메시지를 트리거하지 않습니다.

위의 Eva M, 거의 위에 게시된 것과 같이 답이 있었습니다 (고마워 Eva M!):

var validator = $( "#myform" ).validate();
validator.form();

이것은 거의 답이지만 2018년 12월 13일 현재 최신 jquery validation plugin에서도 문제가 발생합니다.문제는 해당 샘플을 직접 복사한 후 EVER에서 ".validate()"를 두 번 이상 호출하면 유효성 검사의 포커스/키 처리가 깨지고, 유효성 검사에 오류가 제대로 나타나지 않을 수 있다는 점입니다.

Eva M의 답변을 사용하고 포커스/키/오류 숨기기 문제가 발생하지 않도록 하는 방법은 다음과 같습니다.

1) validator를 변수/global에 저장합니다.

var oValidator = $("#myform").validate();

2) $("#myform").validate()를 다시 호출하지 마십시오.

$("#myform").validate()를 두 번 이상 호출하면 포커스/키/오류 숨기기 문제가 발생할 수 있습니다.

3) 변수/global 및 호출 양식을 사용합니다.

var bIsValid = oValidator.form();

비슷한 경우에 저는 저만의 검증 로직을 가지고 있었고 단지 jQuery validation을 사용하여 메시지를 보여주고 싶었습니다.이것이 제가 한 일입니다.

//1) Enable jQuery validation
var validator = $('#myForm').validate();

$('#myButton').click(function(){
  //my own validation logic here
  //.....
  //2) when validation failed, show the error message manually
  validator.showErrors({
    'myField': 'my custom error message'
  });
});

tnx @Anastasiosyal 이 스레드에서 공유하고 싶습니다.

필드를 비웠을 때 입력 필드가 어떻게 트리거되지 않았는지 확신할 수 없습니다.하지만 다음을 사용하여 각 필수 필드를 개별적으로 트리거할 수 있었습니다.

$(".setting-p input").bind("change", function () {
        //Seven.NetOps.validateSettings(Seven.NetOps.saveSettings);
        /*$.validator.unobtrusive.parse($('#saveForm'));*/
        $('#NodeZoomLevel').valid();
        $('#ZoomLevel').valid();
        $('#CenterLatitude').valid();
        $('#CenterLongitude').valid();
        $('#NodeIconSize').valid();
        $('#SaveDashboard').valid();
        $('#AutoRefresh').valid();
    });

제 견해는 이렇습니다.

@using (Html.BeginForm("SaveSettings", "Settings", FormMethod.Post, new {id = "saveForm"}))
{
    <div id="sevenRightBody">
        <div id="mapMenuitemPanel" class="setingsPanelStyle" style="display: block;">
            <div class="defaultpanelTitleStyle">Map Settings</div>
            Customize the map view upon initial navigation to the map view page.
            <p class="setting-p">@Html.LabelFor(x => x.NodeZoomLevel)</p>
            <p class="setting-p">@Html.EditorFor(x => x.NodeZoomLevel) @Html.ValidationMessageFor(x => x.NodeZoomLevel)</p>
            <p class="setting-p">@Html.LabelFor(x => x.ZoomLevel)</p>
            <p class="setting-p">@Html.EditorFor(x => x.ZoomLevel) @Html.ValidationMessageFor(x => x.ZoomLevel)</p>
            <p class="setting-p">@Html.LabelFor(x => x.CenterLatitude)</p>
            <p class="setting-p">@Html.EditorFor(x => x.CenterLatitude) @Html.ValidationMessageFor(x => x.CenterLatitude)</p>
            <p class="setting-p">@Html.LabelFor(x => x.CenterLongitude)</p>
            <p class="setting-p">@Html.EditorFor(x => x.CenterLongitude) @Html.ValidationMessageFor(x => x.CenterLongitude)</p>
            <p class="setting-p">@Html.LabelFor(x => x.NodeIconSize)</p>
            <p class="setting-p">@Html.SliderSelectFor(x => x.NodeIconSize) @Html.ValidationMessageFor(x => x.NodeIconSize)</p>
        </div>

그리고 나의 실체.

   public class UserSetting : IEquatable<UserSetting>
    {
        [Required(ErrorMessage = "Missing Node Zoom Level.")]
        [Range(200, 10000000, ErrorMessage = "Node Zoom Level must be between {1} and {2}.")]
        [DefaultValue(100000)]
        [Display(Name = "Node Zoom Level")]
        public double NodeZoomLevel { get; set; }

        [Required(ErrorMessage = "Missing Zoom Level.")]
        [Range(200, 10000000, ErrorMessage = "Zoom Level must be between {1} and {2}.")]
        [DefaultValue(1000000)]
        [Display(Name = "Zoom Level")]
        public double ZoomLevel { get; set; }

        [Range(-90, 90, ErrorMessage = "Latitude degrees must be between {1} and {2}.")]
        [Required(ErrorMessage = "Missing Latitude.")]
        [DefaultValue(-200)]
        [Display(Name = "Latitude")]
        public double CenterLatitude { get; set; }

        [Range(-180, 180, ErrorMessage = "Longitude degrees must be between {1} and {2}.")]
        [Required(ErrorMessage = "Missing Longitude.")]
        [DefaultValue(-200)]
        [Display(Name = "Longitude")]
        public double CenterLongitude { get; set; }

        [Display(Name = "Save Dashboard")]
        public bool SaveDashboard { get; set; }
.....
}

좋은 방법이 있습니다.validate()양식에 매개 변수를 적용하고 나중에 수동으로 양식의 한 필드를 검증하려고 합니다.

var validationManager = $('.myForm').validate(myParameters);
...
validationManager.element($(this));

설명서:Validator.element()

언급URL : https://stackoverflow.com/questions/1479255/how-to-manually-trigger-validation-with-jquery-validate