ASP.NET Core 2.1 Unobtrusive Ajax Validation Not Working With Partial View Form Swap










0















I've spent several hours combing Stackoverflow and other sites trying everyone's solutions with no luck so far. I'm sure I've missed something, but I can't see it. Hopefully you can point me to a fix.



I have an initial form inside a partial view that is rendered into a parent view whose validation works fine. Once the form is submitted via Ajax replace, I return either a login or registration partial view with a new form in the response. This second form will not display the model validation errors when an incomplete form is submitted and the same partial view is returned.



Thanks in advance for any tips you can offer to bring an end to this insanity!



Parent View Section



<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-primary" id="formData">
@await Html.PartialAsync("_UserNamePartial", new UserNameViewModel())
</div>
</div>
</div>


Working Rendered Partial View



<div class="panel-heading">
<h3 class="panel-title">Let's Start With Your E-mail Address</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form asp-controller="Account" asp-action="IsAccountValid" data-ajax="true" data-ajax-method="POST"
data-ajax-mode="replace" data-ajax-update="#formData">
@Html.AntiForgeryToken()
<div class="form-group">
<label for="UserName">Your Email Address</label>
<div class="input-group">
<input type="text" id="UserName" name="UserName" class="form-control" placeholder="Your email address" />
<div class="input-group-btn">
<button type="submit" id="btnGetStarted" class="btn btn-primary">Get Started</button>
</div>
</div>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
</form>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</div>
</div>
</div>


Initial Validation Controller Action



 [HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public IActionResult IsAccountValid(UserNameViewModel model)

if (!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);

AccountRepository accountRepository = new AccountRepository(ConnectionConfig.InshoraDev);
AuthName match = accountRepository.GetAuthName(model.UserName);

if (match != null)

ModelState.Clear();
LoginViewModel loginModel = new LoginViewModel()

UserName = model.UserName
;

return PartialView("_UserLoginPartial", loginModel);


ModelState.Clear();
SignUpViewModel signupModel = new SignUpViewModel()

UserName = model.UserName,
;

return PartialView("_UserSignUp", signupModel);



Login Partial View (Validation Error Display Not Working)



@model Inshora.Models.Account.LoginViewModel

<div asp-validation-summary="ModelOnly" class="text-danger"></div>

<div class="panel-heading">
<h3 class="panel-title">Log Into Your Account</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form" style="display: block;"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="formData" data-ajax-complete="AcctLib.Login.Events.onComplete">
@Html.AntiForgeryToken()
<div class="form-group">
<input type="text" name="UserName" id="UserName" tabindex="1" class="form-control" placeholder="Email Address" value="@Model.UserName">
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<input type="password" name="Password" id="Password" tabindex="2" class="form-control" placeholder="Password">
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="RememberMe" id="RememberMe">
<label for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function()
AcctLib.Login.Init();
)
</script>


LoginViewModel



public class LoginViewModel

[Required]
public string UserName get; set;

[Required]
public string Password get; set;

[Required]
public bool RememberMe get; set;



Client Side Initialization Code



AcctLib.Login.RebindForm = function() 
$('form').each(function (i, f)
$form = $(f);
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($form);
);


AcctLib.Login.Init = function ()
AcctLib.Login.RebindForm();
$('#UserName').focus();



Update



I have updated the parent page (index.cshtml) to the following and it still doesn't display the messages.



<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-primary" id="formData">
@await Html.PartialAsync("_UserNamePartial", new UserNameViewModel())
</div>
</div>
</div>

@section Scripts

@ await Html.RenderPartialAsync("_ValidationScriptsPartial");










share|improve this question
























  • Lastly where do you have the partial defined to inject the _ValidationScriptsPartial? or are you rolling your own grown validation?

    – mvermef
    Nov 15 '18 at 19:41











  • I'm using _Layout.cshtml to include the validation scripts: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> <script src="~/lib/jquery.unobtrusive-ajax/jquery.unobtrusive-ajax.js">

    – InshoraDev
    Nov 15 '18 at 20:23












  • That might be part of the problem... I only use validation with in the partial within @section Scripts, because now validation is active all the time when in _layout

    – mvermef
    Nov 15 '18 at 20:25












  • Thanks. This is my first core mvc app after doing quite a few MVC 4 apps. I wasn't aware of the new _ValidationScriptsPartial. I modified the index page to include this in the scripts section. The initial partial view validates just fine. The ajax loaded form still doesn't show the validation errors. I guess I'd better start walking through the unobtrusive source code to see what I'm missing.

    – InshoraDev
    Nov 15 '18 at 20:50











  • You should be re-parsing the $.validator in the success callback of your ajax call that is loading the form (after the partial has been added to the DOM). And scripts should never be in partial views.

    – user3559349
    Nov 15 '18 at 21:08















0















I've spent several hours combing Stackoverflow and other sites trying everyone's solutions with no luck so far. I'm sure I've missed something, but I can't see it. Hopefully you can point me to a fix.



I have an initial form inside a partial view that is rendered into a parent view whose validation works fine. Once the form is submitted via Ajax replace, I return either a login or registration partial view with a new form in the response. This second form will not display the model validation errors when an incomplete form is submitted and the same partial view is returned.



Thanks in advance for any tips you can offer to bring an end to this insanity!



Parent View Section



<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-primary" id="formData">
@await Html.PartialAsync("_UserNamePartial", new UserNameViewModel())
</div>
</div>
</div>


Working Rendered Partial View



<div class="panel-heading">
<h3 class="panel-title">Let's Start With Your E-mail Address</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form asp-controller="Account" asp-action="IsAccountValid" data-ajax="true" data-ajax-method="POST"
data-ajax-mode="replace" data-ajax-update="#formData">
@Html.AntiForgeryToken()
<div class="form-group">
<label for="UserName">Your Email Address</label>
<div class="input-group">
<input type="text" id="UserName" name="UserName" class="form-control" placeholder="Your email address" />
<div class="input-group-btn">
<button type="submit" id="btnGetStarted" class="btn btn-primary">Get Started</button>
</div>
</div>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
</form>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</div>
</div>
</div>


Initial Validation Controller Action



 [HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public IActionResult IsAccountValid(UserNameViewModel model)

if (!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);

AccountRepository accountRepository = new AccountRepository(ConnectionConfig.InshoraDev);
AuthName match = accountRepository.GetAuthName(model.UserName);

if (match != null)

ModelState.Clear();
LoginViewModel loginModel = new LoginViewModel()

UserName = model.UserName
;

return PartialView("_UserLoginPartial", loginModel);


ModelState.Clear();
SignUpViewModel signupModel = new SignUpViewModel()

UserName = model.UserName,
;

return PartialView("_UserSignUp", signupModel);



Login Partial View (Validation Error Display Not Working)



@model Inshora.Models.Account.LoginViewModel

<div asp-validation-summary="ModelOnly" class="text-danger"></div>

<div class="panel-heading">
<h3 class="panel-title">Log Into Your Account</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form" style="display: block;"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="formData" data-ajax-complete="AcctLib.Login.Events.onComplete">
@Html.AntiForgeryToken()
<div class="form-group">
<input type="text" name="UserName" id="UserName" tabindex="1" class="form-control" placeholder="Email Address" value="@Model.UserName">
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<input type="password" name="Password" id="Password" tabindex="2" class="form-control" placeholder="Password">
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="RememberMe" id="RememberMe">
<label for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function()
AcctLib.Login.Init();
)
</script>


LoginViewModel



public class LoginViewModel

[Required]
public string UserName get; set;

[Required]
public string Password get; set;

[Required]
public bool RememberMe get; set;



Client Side Initialization Code



AcctLib.Login.RebindForm = function() 
$('form').each(function (i, f)
$form = $(f);
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($form);
);


AcctLib.Login.Init = function ()
AcctLib.Login.RebindForm();
$('#UserName').focus();



Update



I have updated the parent page (index.cshtml) to the following and it still doesn't display the messages.



<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-primary" id="formData">
@await Html.PartialAsync("_UserNamePartial", new UserNameViewModel())
</div>
</div>
</div>

@section Scripts

@ await Html.RenderPartialAsync("_ValidationScriptsPartial");










share|improve this question
























  • Lastly where do you have the partial defined to inject the _ValidationScriptsPartial? or are you rolling your own grown validation?

    – mvermef
    Nov 15 '18 at 19:41











  • I'm using _Layout.cshtml to include the validation scripts: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> <script src="~/lib/jquery.unobtrusive-ajax/jquery.unobtrusive-ajax.js">

    – InshoraDev
    Nov 15 '18 at 20:23












  • That might be part of the problem... I only use validation with in the partial within @section Scripts, because now validation is active all the time when in _layout

    – mvermef
    Nov 15 '18 at 20:25












  • Thanks. This is my first core mvc app after doing quite a few MVC 4 apps. I wasn't aware of the new _ValidationScriptsPartial. I modified the index page to include this in the scripts section. The initial partial view validates just fine. The ajax loaded form still doesn't show the validation errors. I guess I'd better start walking through the unobtrusive source code to see what I'm missing.

    – InshoraDev
    Nov 15 '18 at 20:50











  • You should be re-parsing the $.validator in the success callback of your ajax call that is loading the form (after the partial has been added to the DOM). And scripts should never be in partial views.

    – user3559349
    Nov 15 '18 at 21:08













0












0








0








I've spent several hours combing Stackoverflow and other sites trying everyone's solutions with no luck so far. I'm sure I've missed something, but I can't see it. Hopefully you can point me to a fix.



I have an initial form inside a partial view that is rendered into a parent view whose validation works fine. Once the form is submitted via Ajax replace, I return either a login or registration partial view with a new form in the response. This second form will not display the model validation errors when an incomplete form is submitted and the same partial view is returned.



Thanks in advance for any tips you can offer to bring an end to this insanity!



Parent View Section



<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-primary" id="formData">
@await Html.PartialAsync("_UserNamePartial", new UserNameViewModel())
</div>
</div>
</div>


Working Rendered Partial View



<div class="panel-heading">
<h3 class="panel-title">Let's Start With Your E-mail Address</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form asp-controller="Account" asp-action="IsAccountValid" data-ajax="true" data-ajax-method="POST"
data-ajax-mode="replace" data-ajax-update="#formData">
@Html.AntiForgeryToken()
<div class="form-group">
<label for="UserName">Your Email Address</label>
<div class="input-group">
<input type="text" id="UserName" name="UserName" class="form-control" placeholder="Your email address" />
<div class="input-group-btn">
<button type="submit" id="btnGetStarted" class="btn btn-primary">Get Started</button>
</div>
</div>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
</form>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</div>
</div>
</div>


Initial Validation Controller Action



 [HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public IActionResult IsAccountValid(UserNameViewModel model)

if (!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);

AccountRepository accountRepository = new AccountRepository(ConnectionConfig.InshoraDev);
AuthName match = accountRepository.GetAuthName(model.UserName);

if (match != null)

ModelState.Clear();
LoginViewModel loginModel = new LoginViewModel()

UserName = model.UserName
;

return PartialView("_UserLoginPartial", loginModel);


ModelState.Clear();
SignUpViewModel signupModel = new SignUpViewModel()

UserName = model.UserName,
;

return PartialView("_UserSignUp", signupModel);



Login Partial View (Validation Error Display Not Working)



@model Inshora.Models.Account.LoginViewModel

<div asp-validation-summary="ModelOnly" class="text-danger"></div>

<div class="panel-heading">
<h3 class="panel-title">Log Into Your Account</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form" style="display: block;"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="formData" data-ajax-complete="AcctLib.Login.Events.onComplete">
@Html.AntiForgeryToken()
<div class="form-group">
<input type="text" name="UserName" id="UserName" tabindex="1" class="form-control" placeholder="Email Address" value="@Model.UserName">
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<input type="password" name="Password" id="Password" tabindex="2" class="form-control" placeholder="Password">
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="RememberMe" id="RememberMe">
<label for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function()
AcctLib.Login.Init();
)
</script>


LoginViewModel



public class LoginViewModel

[Required]
public string UserName get; set;

[Required]
public string Password get; set;

[Required]
public bool RememberMe get; set;



Client Side Initialization Code



AcctLib.Login.RebindForm = function() 
$('form').each(function (i, f)
$form = $(f);
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($form);
);


AcctLib.Login.Init = function ()
AcctLib.Login.RebindForm();
$('#UserName').focus();



Update



I have updated the parent page (index.cshtml) to the following and it still doesn't display the messages.



<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-primary" id="formData">
@await Html.PartialAsync("_UserNamePartial", new UserNameViewModel())
</div>
</div>
</div>

@section Scripts

@ await Html.RenderPartialAsync("_ValidationScriptsPartial");










share|improve this question
















I've spent several hours combing Stackoverflow and other sites trying everyone's solutions with no luck so far. I'm sure I've missed something, but I can't see it. Hopefully you can point me to a fix.



I have an initial form inside a partial view that is rendered into a parent view whose validation works fine. Once the form is submitted via Ajax replace, I return either a login or registration partial view with a new form in the response. This second form will not display the model validation errors when an incomplete form is submitted and the same partial view is returned.



Thanks in advance for any tips you can offer to bring an end to this insanity!



Parent View Section



<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-primary" id="formData">
@await Html.PartialAsync("_UserNamePartial", new UserNameViewModel())
</div>
</div>
</div>


Working Rendered Partial View



<div class="panel-heading">
<h3 class="panel-title">Let's Start With Your E-mail Address</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form asp-controller="Account" asp-action="IsAccountValid" data-ajax="true" data-ajax-method="POST"
data-ajax-mode="replace" data-ajax-update="#formData">
@Html.AntiForgeryToken()
<div class="form-group">
<label for="UserName">Your Email Address</label>
<div class="input-group">
<input type="text" id="UserName" name="UserName" class="form-control" placeholder="Your email address" />
<div class="input-group-btn">
<button type="submit" id="btnGetStarted" class="btn btn-primary">Get Started</button>
</div>
</div>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
</form>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</div>
</div>
</div>


Initial Validation Controller Action



 [HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public IActionResult IsAccountValid(UserNameViewModel model)

if (!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);

AccountRepository accountRepository = new AccountRepository(ConnectionConfig.InshoraDev);
AuthName match = accountRepository.GetAuthName(model.UserName);

if (match != null)

ModelState.Clear();
LoginViewModel loginModel = new LoginViewModel()

UserName = model.UserName
;

return PartialView("_UserLoginPartial", loginModel);


ModelState.Clear();
SignUpViewModel signupModel = new SignUpViewModel()

UserName = model.UserName,
;

return PartialView("_UserSignUp", signupModel);



Login Partial View (Validation Error Display Not Working)



@model Inshora.Models.Account.LoginViewModel

<div asp-validation-summary="ModelOnly" class="text-danger"></div>

<div class="panel-heading">
<h3 class="panel-title">Log Into Your Account</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form" style="display: block;"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="formData" data-ajax-complete="AcctLib.Login.Events.onComplete">
@Html.AntiForgeryToken()
<div class="form-group">
<input type="text" name="UserName" id="UserName" tabindex="1" class="form-control" placeholder="Email Address" value="@Model.UserName">
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<input type="password" name="Password" id="Password" tabindex="2" class="form-control" placeholder="Password">
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="RememberMe" id="RememberMe">
<label for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function()
AcctLib.Login.Init();
)
</script>


LoginViewModel



public class LoginViewModel

[Required]
public string UserName get; set;

[Required]
public string Password get; set;

[Required]
public bool RememberMe get; set;



Client Side Initialization Code



AcctLib.Login.RebindForm = function() 
$('form').each(function (i, f)
$form = $(f);
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($form);
);


AcctLib.Login.Init = function ()
AcctLib.Login.RebindForm();
$('#UserName').focus();



Update



I have updated the parent page (index.cshtml) to the following and it still doesn't display the messages.



<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-primary" id="formData">
@await Html.PartialAsync("_UserNamePartial", new UserNameViewModel())
</div>
</div>
</div>

@section Scripts

@ await Html.RenderPartialAsync("_ValidationScriptsPartial");







c# asp.net-core-mvc unobtrusive-validation asp.net-core-2.1






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 16 '18 at 8:49







user3559349

















asked Nov 15 '18 at 19:23









InshoraDevInshoraDev

143




143












  • Lastly where do you have the partial defined to inject the _ValidationScriptsPartial? or are you rolling your own grown validation?

    – mvermef
    Nov 15 '18 at 19:41











  • I'm using _Layout.cshtml to include the validation scripts: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> <script src="~/lib/jquery.unobtrusive-ajax/jquery.unobtrusive-ajax.js">

    – InshoraDev
    Nov 15 '18 at 20:23












  • That might be part of the problem... I only use validation with in the partial within @section Scripts, because now validation is active all the time when in _layout

    – mvermef
    Nov 15 '18 at 20:25












  • Thanks. This is my first core mvc app after doing quite a few MVC 4 apps. I wasn't aware of the new _ValidationScriptsPartial. I modified the index page to include this in the scripts section. The initial partial view validates just fine. The ajax loaded form still doesn't show the validation errors. I guess I'd better start walking through the unobtrusive source code to see what I'm missing.

    – InshoraDev
    Nov 15 '18 at 20:50











  • You should be re-parsing the $.validator in the success callback of your ajax call that is loading the form (after the partial has been added to the DOM). And scripts should never be in partial views.

    – user3559349
    Nov 15 '18 at 21:08

















  • Lastly where do you have the partial defined to inject the _ValidationScriptsPartial? or are you rolling your own grown validation?

    – mvermef
    Nov 15 '18 at 19:41











  • I'm using _Layout.cshtml to include the validation scripts: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> <script src="~/lib/jquery.unobtrusive-ajax/jquery.unobtrusive-ajax.js">

    – InshoraDev
    Nov 15 '18 at 20:23












  • That might be part of the problem... I only use validation with in the partial within @section Scripts, because now validation is active all the time when in _layout

    – mvermef
    Nov 15 '18 at 20:25












  • Thanks. This is my first core mvc app after doing quite a few MVC 4 apps. I wasn't aware of the new _ValidationScriptsPartial. I modified the index page to include this in the scripts section. The initial partial view validates just fine. The ajax loaded form still doesn't show the validation errors. I guess I'd better start walking through the unobtrusive source code to see what I'm missing.

    – InshoraDev
    Nov 15 '18 at 20:50











  • You should be re-parsing the $.validator in the success callback of your ajax call that is loading the form (after the partial has been added to the DOM). And scripts should never be in partial views.

    – user3559349
    Nov 15 '18 at 21:08
















Lastly where do you have the partial defined to inject the _ValidationScriptsPartial? or are you rolling your own grown validation?

– mvermef
Nov 15 '18 at 19:41





Lastly where do you have the partial defined to inject the _ValidationScriptsPartial? or are you rolling your own grown validation?

– mvermef
Nov 15 '18 at 19:41













I'm using _Layout.cshtml to include the validation scripts: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> <script src="~/lib/jquery.unobtrusive-ajax/jquery.unobtrusive-ajax.js">

– InshoraDev
Nov 15 '18 at 20:23






I'm using _Layout.cshtml to include the validation scripts: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> <script src="~/lib/jquery.unobtrusive-ajax/jquery.unobtrusive-ajax.js">

– InshoraDev
Nov 15 '18 at 20:23














That might be part of the problem... I only use validation with in the partial within @section Scripts, because now validation is active all the time when in _layout

– mvermef
Nov 15 '18 at 20:25






That might be part of the problem... I only use validation with in the partial within @section Scripts, because now validation is active all the time when in _layout

– mvermef
Nov 15 '18 at 20:25














Thanks. This is my first core mvc app after doing quite a few MVC 4 apps. I wasn't aware of the new _ValidationScriptsPartial. I modified the index page to include this in the scripts section. The initial partial view validates just fine. The ajax loaded form still doesn't show the validation errors. I guess I'd better start walking through the unobtrusive source code to see what I'm missing.

– InshoraDev
Nov 15 '18 at 20:50





Thanks. This is my first core mvc app after doing quite a few MVC 4 apps. I wasn't aware of the new _ValidationScriptsPartial. I modified the index page to include this in the scripts section. The initial partial view validates just fine. The ajax loaded form still doesn't show the validation errors. I guess I'd better start walking through the unobtrusive source code to see what I'm missing.

– InshoraDev
Nov 15 '18 at 20:50













You should be re-parsing the $.validator in the success callback of your ajax call that is loading the form (after the partial has been added to the DOM). And scripts should never be in partial views.

– user3559349
Nov 15 '18 at 21:08





You should be re-parsing the $.validator in the success callback of your ajax call that is loading the form (after the partial has been added to the DOM). And scripts should never be in partial views.

– user3559349
Nov 15 '18 at 21:08












2 Answers
2






active

oldest

votes


















1














The problem was that I had not used the asp-for tag helpers. Those helpers are responsible for generating the data-* attributes needed by the unobtrusive validation parser. Once I started using them it started working. Thank you to everyone who tried to help.



Corrected View



<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#formData">
@Html.AntiForgeryToken()
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserName"></label>
<input asp-for="UserName" class="form-control" placeholder="Email Address"/>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" placeholder="Password"/>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input asp-for="RememberMe" />
<label asp-for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>





share|improve this answer

























  • Thanks for the correction @StephenMuecke. Do I just click "Add Another Answer" to add the solution?

    – InshoraDev
    Nov 16 '18 at 21:20


















0














if (!ModelState.IsValid)
return PartialView("..\Home\_UserNamePartial", model);


pretty sure this violates pathing



if(!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);





share|improve this answer























  • Thanks for notice that. I updated the code. Still searching for the fix to error display.

    – InshoraDev
    Nov 15 '18 at 20:21











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326598%2fasp-net-core-2-1-unobtrusive-ajax-validation-not-working-with-partial-view-form%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














The problem was that I had not used the asp-for tag helpers. Those helpers are responsible for generating the data-* attributes needed by the unobtrusive validation parser. Once I started using them it started working. Thank you to everyone who tried to help.



Corrected View



<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#formData">
@Html.AntiForgeryToken()
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserName"></label>
<input asp-for="UserName" class="form-control" placeholder="Email Address"/>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" placeholder="Password"/>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input asp-for="RememberMe" />
<label asp-for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>





share|improve this answer

























  • Thanks for the correction @StephenMuecke. Do I just click "Add Another Answer" to add the solution?

    – InshoraDev
    Nov 16 '18 at 21:20















1














The problem was that I had not used the asp-for tag helpers. Those helpers are responsible for generating the data-* attributes needed by the unobtrusive validation parser. Once I started using them it started working. Thank you to everyone who tried to help.



Corrected View



<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#formData">
@Html.AntiForgeryToken()
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserName"></label>
<input asp-for="UserName" class="form-control" placeholder="Email Address"/>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" placeholder="Password"/>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input asp-for="RememberMe" />
<label asp-for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>





share|improve this answer

























  • Thanks for the correction @StephenMuecke. Do I just click "Add Another Answer" to add the solution?

    – InshoraDev
    Nov 16 '18 at 21:20













1












1








1







The problem was that I had not used the asp-for tag helpers. Those helpers are responsible for generating the data-* attributes needed by the unobtrusive validation parser. Once I started using them it started working. Thank you to everyone who tried to help.



Corrected View



<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#formData">
@Html.AntiForgeryToken()
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserName"></label>
<input asp-for="UserName" class="form-control" placeholder="Email Address"/>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" placeholder="Password"/>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input asp-for="RememberMe" />
<label asp-for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>





share|improve this answer















The problem was that I had not used the asp-for tag helpers. Those helpers are responsible for generating the data-* attributes needed by the unobtrusive validation parser. Once I started using them it started working. Thank you to everyone who tried to help.



Corrected View



<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#formData">
@Html.AntiForgeryToken()
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserName"></label>
<input asp-for="UserName" class="form-control" placeholder="Email Address"/>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" placeholder="Password"/>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input asp-for="RememberMe" />
<label asp-for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 16 '18 at 21:31

























answered Nov 15 '18 at 21:29









InshoraDevInshoraDev

143




143












  • Thanks for the correction @StephenMuecke. Do I just click "Add Another Answer" to add the solution?

    – InshoraDev
    Nov 16 '18 at 21:20

















  • Thanks for the correction @StephenMuecke. Do I just click "Add Another Answer" to add the solution?

    – InshoraDev
    Nov 16 '18 at 21:20
















Thanks for the correction @StephenMuecke. Do I just click "Add Another Answer" to add the solution?

– InshoraDev
Nov 16 '18 at 21:20





Thanks for the correction @StephenMuecke. Do I just click "Add Another Answer" to add the solution?

– InshoraDev
Nov 16 '18 at 21:20













0














if (!ModelState.IsValid)
return PartialView("..\Home\_UserNamePartial", model);


pretty sure this violates pathing



if(!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);





share|improve this answer























  • Thanks for notice that. I updated the code. Still searching for the fix to error display.

    – InshoraDev
    Nov 15 '18 at 20:21















0














if (!ModelState.IsValid)
return PartialView("..\Home\_UserNamePartial", model);


pretty sure this violates pathing



if(!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);





share|improve this answer























  • Thanks for notice that. I updated the code. Still searching for the fix to error display.

    – InshoraDev
    Nov 15 '18 at 20:21













0












0








0







if (!ModelState.IsValid)
return PartialView("..\Home\_UserNamePartial", model);


pretty sure this violates pathing



if(!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);





share|improve this answer













if (!ModelState.IsValid)
return PartialView("..\Home\_UserNamePartial", model);


pretty sure this violates pathing



if(!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 15 '18 at 19:40









mvermefmvermef

3,01211727




3,01211727












  • Thanks for notice that. I updated the code. Still searching for the fix to error display.

    – InshoraDev
    Nov 15 '18 at 20:21

















  • Thanks for notice that. I updated the code. Still searching for the fix to error display.

    – InshoraDev
    Nov 15 '18 at 20:21
















Thanks for notice that. I updated the code. Still searching for the fix to error display.

– InshoraDev
Nov 15 '18 at 20:21





Thanks for notice that. I updated the code. Still searching for the fix to error display.

– InshoraDev
Nov 15 '18 at 20:21

















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326598%2fasp-net-core-2-1-unobtrusive-ajax-validation-not-working-with-partial-view-form%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

What does pagestruct do in Eviews?

Dutch intervention in Lombok and Karangasem

Channel Islands