I'm using core's remote validation in a form inside a partial view that is loaded in the main view but I keep getting the error in the browser console when trying to execute the validation ([element_name] is the name of the field that's being validated):
Uncaught TypeError: Cannot read property 'call' of undefined. Exception occurred when checking element [element_name], check the '__dummy__' method.
at a.validator.check (VM23 jquery.validate.min.js:4)
at a.validator.element (VM23 jquery.validate.min.js:4)
at a.validator.onfocusout (VM23 jquery.validate.min.js:4)
at HTMLTextAreaElement.b (VM23 jquery.validate.min.js:4)
at HTMLFormElement.dispatch (jquery.min.js:2)
at HTMLFormElement.v.handle (jquery.min.js:2)
at Object.trigger (jquery.min.js:2)
at Object.simulate (jquery.min.js:2)
at HTMLDocument.i (jquery.min.js:2)
So I have a View that, upon clicking a button, loads a partial view that contains a populated form (to perform update actions) in this <div>:
<div class="modal fade" id="modalPlaceholder" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="false"></div>
with this jQuery code:
function requestUpdate(idSolicitacao) {
$('#modalPlaceholder').empty();
$.ajax({
type: 'POST',
url: 'Solicitacao/GetUpdate/' + idSolicitacao,
success: function (result) {
$('#modalPlaceholder').html(result);
}
});
$('#modalPlaceholder').modal('show');
}
In the partial view form I'm using remote validation to validate the changes the user makes. I've included the jquery-validate scripts here because it was not working when I imported it only in the _Layout.cshtml file. The whole file looks like this:
@model Potinho.ViewModels.SolicitacaoVM.Update
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title"><strong>Solicitação</strong></h4>
</div>
<div class="container-fluid" style="margin:10px">
<div class="row">
<div class="col">
<form asp-controller="Solicitacao" asp-action="Update" method="post">
<div class="form-group">
<input asp-for="@Model.IdSolicitacao" hidden />
<input asp-for="@Model.IdPote" hidden />
<input asp-for="@Model.IdSolicitante" hidden />
<input asp-for="@Model.IdFavorecido" hidden />
<input asp-for="@Model.IdItem" hidden />
<input asp-for="@Model.IdStatus" hidden />
<div class="mb-2">
<label asp-for="@Model.Descricao" class="control-label"></label>
<textarea asp-for="@Model.Descricao" class="form-control"> </textarea>
<span asp-validation-for="@Model.Descricao" class="text-danger"></span>
</div>
<div class="mb-2">
<label asp-for="@Model.Local" class="control-label"></label>
<input asp-for="@Model.Local" class="form-control" />
<span asp-validation-for="@Model.Local" class="text-danger"></span>
</div>
<div class="mb-2">
<label asp-for="@Model.Valor" class="control-label"></label>
<input asp-for="@Model.Valor" class="form-control" />
<span asp-validation-for="@Model.Valor" class="text-danger"></span>
</div>
<div class="mb-2">
<label asp-for="@Model.DataInicio" class="control-label"></label>
<input asp-for="@Model.DataInicio" class="form-control" type="date" />
<span asp-validation-for="@Model.DataInicio" class="text-danger"></span>
</div>
<div class="mb-2">
<label asp-for="@Model.DataFim" class="control-label"></label>
<input asp-for="@Model.DataFim" class="form-control" type="date" />
<span asp-validation-for="@Model.DataFim" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<input type="submit" value="Salvar" class="btn btn-success" />
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
</div>
The relevant part of the ViewModel like this:
public class Update
{
[BindProperty]
[Remote(action: "IsDescricaoValid", controller: "Solicitacao")]
[Display(Name = "Descrição")]
public string Descricao { get; set; }
[BindProperty]
[Remote(action: "IsLocalValid", controller: "Solicitacao")]
public string Local { get; set; }
[BindProperty]
[Remote(action: "IsValorValid", controller: "Solicitacao")]
public decimal Valor { get; set; }
[BindProperty]
[Remote(action: "IsDataInicioValid", controller: "Solicitacao")]
[Display(Name = "Data de início")]
public DateTime DataInicio { get; set; }
[BindProperty]
[Remote(action: "IsDataFimValid", controller: "Solicitacao")]
[Display(Name = "Data final")]
public DateTime DataFim { get; set; }
[Required]
[BindProperty]
public DateTime DataSolicitacao { get; set; }
[Key]
[Required]
[BindProperty]
public Guid IdSolicitacao { get; set; }
[Required]
[BindProperty]
public Guid IdPote { get; set; }
[Required]
[BindProperty]
public string IdSolicitante { get; set; }
[Required]
[BindProperty]
public string IdFavorecido { get; set; }
[Required]
[BindProperty]
public Guid IdItem { get; set; }
[Required]
[BindProperty]
public Guid IdStatus { get; set; }
}
And the remote validation methods in the controller:
[AcceptVerbs("Get", "Post")]
[AllowAnonymous]
public IActionResult IsDescricaoValid(string descricao)
{
return _validator.IsDescricaoValid(descricao);
}
[AcceptVerbs("Get", "Post")]
[AllowAnonymous]
public IActionResult IsLocalValid(string local)
{
return _validator.IsLocalValid(local);
}
[AcceptVerbs("Get", "Post")]
[AllowAnonymous]
public IActionResult IsValorValid(decimal valor)
{
return _validator.IsValorValid(valor);
}
[AcceptVerbs("Get", "Post")]
[AllowAnonymous]
public IActionResult IsDataInicioValid(DateTime dataInicio)
{
return _validator.IsDataInicioValid(dataInicio);
}
[AcceptVerbs("Get", "Post")]
[AllowAnonymous]
public IActionResult IsDataFimValid(DateTime dataFim)
{
return _validator.IsDataFimValid(dataFim);
}
From what I have tested, the <div> is being loaded with the partial view and the scripts are imported but every field triggers that same error and the breakpoints I have put in the controller aren't even being hit.
