Как вручную активировать проверку с помощью проверки jQuery?
Я хочу вручную запустить проверку, включая отображение сообщений об ошибках с помощью jQuery Validate.
Сценарий, который я пытаюсь реализовать, представляет собой такую форму:
<form>
<input id=i1> <button id=b1>
<input id=i2> <button id=b2>
</form>
При нажатии b1
, только i1
должен быть проверен. если щелкнуть b2
, только i2
должен быть проверен. Однако все поля должны быть опубликованы. Как я могу это сделать? Я думал об обработке события click для b1/b2
и ручной проверке части формы.
Ответы
Ответ 1
Эта библиотека, похоже, позволяет проверять отдельные элементы. Просто привяжите событие click к своей кнопке и попробуйте следующее:
$("#myform").validate().element("#i1");
Примеры здесь:
http://docs.jquery.com/Plugins/Validation/Validator/element#element
Ответ 2
Или можно просто использовать: $('#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
}
Ответ 3
Мой подход был следующим. Теперь я просто хотел, чтобы моя форма была проверена, когда был выбран один конкретный флажок/изменен:
$('#myForm input:checkbox[name=yourChkBxName]').click(
function(e){
$("#myForm").valid();
}
)
Ответ 4
Как написано в документации, способ запуска проверки формы программным способом - это вызвать validator.form().
var validator = $( "#myform" ).validate();
validator.form();
Ответ 5
Существует недокументированный метод с версии 1.14
validator.checkForm()
Этот метод молчаливо проверяет для возврата true/false. Это не вызывает сообщения об ошибках.
Ответ 6
Я попробовал работать 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; }
.....
}
Ответ 7
Существует хороший способ, если вы используете validate()
с параметрами в форме и хотите вручную подтвердить одно поле вашей формы:
var validationManager = $('.myForm').validate(myParameters);
...
validationManager.element($(this));
Документация: Validator.element()
Ответ 8
В моем аналогичном случае у меня была своя логика проверки и я просто хотел использовать проверку 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'
});
});
Ответ 9
Ева М сверху, почти был ответ, как отправлено выше (Спасибо, Ева М!):
var validator = $( "#myform" ).validate();
validator.form();
Это почти ответ, но он вызывает проблемы, даже в самом последнем плагине для проверки jquery по состоянию на 13 декабря 2018 года. Проблема в том, что если кто-то напрямую копирует этот образец, и НИКОГДА не вызывает ".validate()" более одного раза обработка фокуса/ключа проверки может быть прервана, и проверка может не отображать ошибки должным образом.
Вот как использовать ответ Eva M и убедиться, что эти проблемы с фокусом/ключом/сокрытием ошибок не возникают:
1) Сохраните ваш валидатор в переменную/глобальную.
var oValidator = $("#myform").validate();
2) НЕ вызывайте $ ("# myform"). Validate() НИКОГДА снова.
Если вы вызываете $ ("# myform"). Validate() более одного раза, это может вызвать проблемы с фокусом/ключом/сокрытием ошибок.
3) Используйте переменную/глобальную и форму вызова.
var bIsValid = oValidator.form();