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

jQuery Validate 오류 메시지 표시를 포함하여 유효성 검사를 수동으로 트리거하고 싶습니다 .

내가 달성하려는 시나리오는 다음과 같은 형식입니다.

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

을 클릭 할 b1때만 i1유효성을 검사해야합니다. 암탉 클릭하면 b2, 단지 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();
}
)

documentation에 작성된 것처럼 프로그래밍 방식으로 양식 유효성 검사를 트리거하는 방법은 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 유효성 검사 플러그인에서도 문제가 발생합니다. 문제는 샘플을 직접 복사하고 ".validate ()"을 두 번 이상 호출하면 , 유효성 검사의 포커스 / 키 처리가 손상 될 수 있으며 유효성 검사에 오류가 제대로 표시되지 않을 수 있습니다.

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

1) 유효성 검사기를 변수 / 글로벌에 저장하십시오.

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

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

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

3) 변수 / 글로벌 및 호출 양식을 사용하십시오.

var bIsValid = oValidator.form();

비슷한 경우에는 자체 유효성 검사 논리가 있었고 jQuery 유효성 검사를 사용하여 메시지를 표시하려고했습니다. 이것이 내가 한 일입니다.

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