I have a very simple form with Tag Helper
<form asp-area="Admin" asp-controller="Categories" asp-action="EditCategory" method="post" id="CategoryForm">
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-12 mb-1">
<fieldset class="form-group">
<input type="hidden" id="parentId" value="@ViewBag.parentId" />
<input type="hidden" id="Id" asp-for="Id" />
<label for="basicInput">Name</label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</fieldset>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 mb-1">
<fieldset class="form-group">
<button type="submit">Edit</button>
</fieldset>
</div>
</div>
</form>
I want 1-first check the form validation by jquery client side valudation plugin 2- if it is validated then get a confirmation from user for sending the data
3- then submit it 4- if it is not the data Annotation shows on screen
I have this jquery code for option 2 and 3
$("#CategoryForm").submit(function (event) {
event.preventDefault();
swal.fire({
title: 'Edit Category',
text: "Are you sure?",
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No'
}).then((result) => {
if (result.value) {
$("#CategoryForm").submit();
}
})
});
in this case even the Name input field ( the form validation should be negative) the confirmation is sent to the user
how can I do this ?
to achieve this, you need to install custom jquery package called [jquery validation]. This is how to do it :
$("#CategoryForm").validate({
submitHandler: function(form) {
swal.fire({
title: 'Edit Category',
text: "Are you sure?",
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No'
}).then((result) => {
if (result.value) {
form.submit();
}
})
}
});