it-roy-ru.com

Как вручную запустить валидацию с помощью jQuery validate?

Я хочу вручную запустить проверку, включая отображение сообщений об ошибках с помощью jQuery Validate .

Сценарий, который я пытаюсь реализовать, представляет собой такую ​​форму:

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

При нажатии b1, только i1 должен быть проверен. При нажатии b2 только i2 должен быть проверен. Однако все поля должны быть опубликованы. Как я могу это сделать? Я думал об обработке события click для b1/b2 и ручной проверке части формы.

125
usr

Кажется, что эта библиотека позволяет проверять отдельные элементы. Просто свяжите событие нажатия с вашей кнопкой и попробуйте следующее:

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

Примеры здесь:

http://docs.jquery.com/Plugins/Validation/Validator/element#element

158
Roberto Aloi

Или можно просто использовать: $('#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
}
96
Anastasiosyal

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

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

Как написано в документации , способ инициировать валидацию форм программно - это вызывать validator.form ()

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

Начиная с версии 1.14 существует недокументированный метод

validator.checkForm()

Этот метод выполняет молчаливую проверку для возврата true/false. Это не вызывает сообщения об ошибках.

4
user5936891

Ева М сверху, почти был ответ, как отправлено выше (Спасибо, Ева М!):

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

Это почти ответ, но он вызывает проблемы, даже в самом актуальном плагине для проверки jquery по состоянию на 13 декабря 2018 года. Проблема в том, что если кто-то напрямую копирует этот образец, и НИКОГДА не раз вызывает ".validate ()" обработка фокуса/ключа проверки может быть прервана, и проверка может не показывать ошибки должным образом.

Вот как использовать ответ Евы М и убедиться, что эти проблемы с фокусом/ключом/сокрытием ошибок не возникают:

1) Сохраните ваш валидатор в переменную/глобальную.

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

2) НЕ вызывайте $ ("# myform"). Validate () НИКОГДА снова.

Если вы вызываете $ ("# myform"). Validate () более одного раза, это может вызвать проблемы с фокусом/ключом/сокрытием ошибок.

3) Используйте переменную/глобальную и форму вызова.

var bIsValid = oValidator.form();
1
J-S-B

Есть хороший способ, если вы используете validate() с параметрами в форме и хотите впоследствии вручную проверить одно поле вашей формы:

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

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

0
Tobi G.

я попробовал это сработало 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; }
.....
}
0
bherto39

В моем аналогичном случае у меня была своя собственная логика проверки и я просто хотел использовать проверку 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
user538220