Làm cách nào để kích hoạt xác thực thủ công với xác thực jQuery?

Tôi muốn kích hoạt xác thực thủ công bao gồm hiển thị các thông báo lỗi với Xác thực jQuery .

Kịch bản tôi đang cố gắng thực hiện là một hình thức như thế này:

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

Khi nhấp vào b1, chỉ i1nên được xác nhận. hen nhấp b2, chỉ i2nên được xác nhận. Tuy nhiên tất cả các lĩnh vực phải được đăng. Tôi có thể làm cái này như thế nào? Tôi đã nghĩ về việc xử lý sự kiện nhấp chuột b1/b2và xác nhận thủ công một phần của biểu mẫu.

Thư viện đó dường như cho phép xác nhận cho các yếu tố duy nhất. Chỉ cần liên kết một sự kiện nhấp chuột vào nút của bạn và thử như sau:

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

Ví dụ ở đây:

https://jqueryvalidation.org/Validator.element

Hoặc người ta có thể chỉ cần sử dụng: $('#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
}

Lưu ý rằng validate()cần phải được gọi trên biểu mẫu trước khi kiểm tra nó bằng phương pháp này.

Liên kết tài liệu: https://jqueryvalidation.org/valid/

Cách tiếp cận của tôi là như dưới đây. Bây giờ tôi chỉ muốn biểu mẫu của mình được xác thực khi một hộp kiểm cụ thể được nhấp / thay đổi:

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

Như được viết trong tài liệu , cách để kích hoạt xác thực mẫu theo lập trình là gọi invator.form ()

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

Có một phương pháp không có giấy tờ như phiên bản 1.14

validator.checkForm()

Phương pháp này âm thầm xác nhận để trả về đúng / sai. Nó không kích hoạt thông báo lỗi.

Eva M từ trên cao, gần như đã có câu trả lời như đã đăng ở trên (Cảm ơn Eva M!):

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

Đây gần như là câu trả lời, nhưng nó gây ra vấn đề, ngay cả plugin xác thực jquery cập nhật nhất kể từ ngày 13 tháng 12 năm 2018. Vấn đề là nếu một người sao chép trực tiếp mẫu đó và EVER gọi ".validate ()" nhiều lần , việc xử lý tập trung / khóa của xác thực có thể bị hỏng và xác thực có thể không hiển thị đúng lỗi.

Dưới đây là cách sử dụng câu trả lời của Eva M và đảm bảo các vấn đề ẩn / khóa / ẩn lỗi đó không xảy ra:

1) Lưu trình xác nhận của bạn vào một biến / toàn cầu.

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

2) KHÔNG gọi $ ("# myform"). Xác thực () EVER một lần nữa.

Nếu bạn gọi $ ("# myform"). Xác thực () nhiều lần, điều đó có thể gây ra sự cố ẩn / khóa / lỗi.

3) Sử dụng biến / toàn cầu và hình thức gọi.

var bIsValid = oValidator.form();

Trong trường hợp tương tự, tôi có logic xác thực của riêng mình và chỉ muốn sử dụng xác thực jQuery để hiển thị thông báo. Đây là những gì tôi đã làm.

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

tôi đã thử nó hoạt động tnx @Anastasiosyal tôi muốn chia sẻ nó trên chủ đề này.

Tôi không tích cực làm thế nào các trường đầu vào không kích hoạt khi tôi làm trống các trường. Nhưng tôi đã quản lý để kích hoạt từng trường bắt buộc bằng cách sử dụng:

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

đây là quan điểm của tôi

@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>

và thực thể của tôi

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

Có một cách tốt nếu bạn sử dụng validate()với các tham số trên biểu mẫu và muốn xác thực một trường của biểu mẫu theo cách thủ công sau đó:

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

Tài liệu: Trình xác thực.element ()