Як вручну запустити перевірку за допомогою перевірки jQuery?


143

Я хочу вручну запустити перевірку, включаючи показ повідомлень про помилки з jQuery Validate .

Сценарій, який я намагаюся здійснити, є така форма:

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

При натисканні слід b1лише i1підтвердити. натискання курки b2, i2має бути підтверджено. Однак усі поля повинні бути розміщені. Як я можу це зробити? Я подумав про обробку події натискання b1/b2та перевірку частини форми вручну.


Чому б не перевірити його вручну? Цей плагін дуже корисний для перевірки всієї форми, але в цьому випадку більш зручна форма перевірки вручну.
Анатолій

Форма є більшою, ніж у моєму прикладі. Я хочу, щоб це було автоматизовано.
usr

Відповіді:


176

Ця бібліотека, здається, дозволяє перевірити окремі елементи. Просто пов’яжіть подію клацання зі своєю кнопкою та спробуйте наступне:

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

Приклади тут:

https://jqueryvalidation.org/Validator.element


15
Це підтверджує всю форму ... для перевірки тільки 1 поле, правильний спосіб полягає в наступному: stackoverflow.com/a/12195091/114029
Leniel Маккаферрі

З будь-якої причини я не отримую користувальницький текст помилки, коли перевіряю таким чином. Може мати щось спільне з тим, що я працюю в діалозі Дурандала. Маючи в цьому контексті багато питань із цією рамкою.
P.Brian.Mackey

@Roberto Aloi: Посилання застаріле
Себастьян

@Sebastian Дякую за ping, оновив посилання зараз!
Роберто Алой

113

Або можна просто скористатися: $('#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/


15
validate()потрібно викликати форму, перш ніж перевірити її за допомогою цього методу.
GETah

у мене є такий запит, якщо ($ ('# myElem'). val () == '2017-4-12') {неправильний вибір дати} ще {допустимий вибір}
srinivas gowda

29

Мій підхід був як нижче. Тепер я просто хотів, щоб моя форма була підтверджена, коли один конкретний прапорець було натиснуто / змінено:

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

Мій запит, якщо ($ ('# someID) ===' 2017-4-12) {$ ("# myform"). Validate (). Element ("# i1"). Valid ();} else {$ ( validate (). element ("# i1"). invalid ();} правильний код
srinivas gowda

14

Як зазначено в документації , спосіб запустити перевірку форми програмно - викликати validator.form ()

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

2
Це не відповідає на запитання, оскільки питання стосується перевірки лише одного конкретного поля. Але це саме те, що я шукав. Дякую!
jlh

4

Існує незадокументований метод на версію 1.14

validator.checkForm()

Цей метод мовчки підтверджує повернення true / false. Це не викликає повідомлення про помилки.


9
недокументований = може зламатися в будь-який час.
usr

2

Ева М зверху, майже відповідь, як розміщена вище (Спасибі Єва М!):

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

Це майже відповідь, але це викликає проблеми навіть у найсучаснішому плагіні перевірки jquery станом на 13 грудня 2018 року. Проблема полягає в тому, що якщо один безпосередньо копіює цей зразок, і EVER викликає ".validate ()" не один раз , обробка фокуса / ключа валідації може бути порушена, і перевірка може не відображатись помилок належним чином.

Ось як використовувати відповідь Єви М і переконатись у тому, що проблеми з фокусом / клавішею / помилками не виникають:

1) Збережіть валідатор до змінної / глобальної.

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

2) НЕ дзвоніть у $ ("# myform"). Валідайте () НАЙКІДКО.

Якщо ви телефонуєте $ ("# myform"). Validate () не один раз, це може спричинити проблеми з фокусом / клавішею / помилками помилок.

3) Використовуйте змінну / глобальну форму та форму дзвінка.

var bIsValid = oValidator.form();

1

У моєму подібному випадку я мав власну логіку перевірки і просто хотів використати перевірку 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'
  });
});


0

Я спробував це працювати 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; }
.....
}

3
Ця відповідь передбачає середовище .Net, коли питання явно стосується перевірки jQuery.
Кеногу Лабз

0

Є хороший спосіб, якщо ви використовуєте validate()параметри форми та хочете згодом перевірити одне поле форми:

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

Документація: Validator.element ()

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.