We Keep Coding

Validation not working on cloned elements

If I create multiple elements like this...
#for (int i = 0; i < 10; i++)
{
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label asp-for="Railcars[i].RailcarNumber" class="control-label"></label>
<input asp-for="Railcars[i].RailcarNumber" class="form-control" />
<span asp-validation-for="Railcars[i].RailcarNumber" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="Railcars[i].Weight" class="control-label"></label>
<input asp-for="Railcars[i].Weight" class="form-control" />
<span asp-validation-for="Railcars[i].Weight" class="text-danger"></span>
</div>
</div>
</div>
}
Validation appears to work correctly for all rows.
However, if I create a single row like this...
<div class="railcars">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label asp-for="Railcars[0].RailcarNumber" class="control-label"></label>
<input asp-for="Railcars[0].RailcarNumber" class="form-control" />
<span asp-validation-for="Railcars[0].RailcarNumber" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="Railcars[0].Weight" class="control-label"></label>
<input asp-for="Railcars[0].Weight" class="form-control" />
<span asp-validation-for="Railcars[0].Weight" class="text-danger"></span>
</div>
</div>
</div>
</div>
And then clone rows using jQuery's clone(), validation only appears to work for the first (non-cloned) row.
Note: I am taking care to update all the ID, name, and for attributes of the cloned elements, and updating the subscript number. I checked that it's correct and posts the correct information to the server. ModelState even correctly detects validation problems with the cloned elements. It's just that client-side validation doesn't work on them.
Here is the HTML produced:
Uncloned Row (validation works):
<div class="row first-railcar">
<div class="col-md-4">
<div class="form-group railcar-number">
<label class="control-label" for="Railcars_0__Railcar">Railcar Number</label>
<input class="form-control" type="text" data-val="true" data-val-length="The field Railcar Number must be a string with a maximum length of 18." data-val-length-max="18" data-val-required="The Railcar Number field is required." id="Railcars_0__Railcar" maxlength="18" name="Railcars[0].Railcar" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Railcars[0].Railcar" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group railcar-volume">
<label class="control-label" for="Railcars_0__Volume">Volume (pounds)</label>
<input class="form-control" type="text" data-val="true" data-val-number="The field Volume (pounds) must be a number." data-val-required="The Volume (pounds) field is required." id="Railcars_0__Volume" name="Railcars[0].Volume" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Railcars[0].Volume" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label"> </label><br>
<img class="add-railcar" src="/images/add.png" title="Add Additional Railcar" style="display: none;">
<img class="remove-railcar" src="/images/delete_2.png" title="Remove Railcar" style="display: none">
</div>
</div>
</div>
Cloned Row (validation doesn't work):
<div class="row">
<div class="col-md-4">
<div class="form-group railcar-number">
<label class="control-label" for="Railcars_1__Railcar">Railcar Number</label>
<input class="form-control" type="text" data-val="true" data-val-length="The field Railcar Number must be a string with a maximum length of 18." data-val-length-max="18" data-val-required="The Railcar Number field is required." id="Railcars_1__Railcar" maxlength="18" name="Railcars[1].Railcar" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Railcars[1].Railcar" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group railcar-volume">
<label class="control-label" for="Railcars_1__Volume">Volume (pounds)</label>
<input class="form-control" type="text" data-val="true" data-val-number="The field Volume (pounds) must be a number." data-val-required="The Volume (pounds) field is required." id="Railcars_1__Volume" name="Railcars[1].Volume" value="">
<span class="text-danger field-validation-valid" data-valmsg-for="Railcars[1].Volume" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label"> </label><br>
<img class="add-railcar" src="/images/add.png" title="Add Additional Railcar">
<img class="remove-railcar" src="/images/delete_2.png" title="Remove Railcar" style="">
</div>
</div>
</div>
I also carefully compared the cloned HTML above to the HTML created by my first example (with the for loop), and they are identical. Apparently, there is something different about it being added after the page has loaded.
Does anyone know how to clone elements this way and have validation work on all the cloned elements?
Update:
My use of jQuery's clone() includes two true values ($row.clone(true, true)). If I don't do this, the click handlers for my images don't work.
As recommended, I tried several variations of the following code after cloning the elements. But I couldn't get it to make any difference.
var form = document.getElementById('input-form');
$.validator.unobtrusive.parse(form);

You are on the right track with $.validator.unobtrusive.parse(form);. However for jQuery Validation to work on copied/appended with ajax/cloned elements you need three things.
Make sure every input element has a unique name.
Remove any previous validation bindings in the form of existing elements.
Re-create the validation bindings.
So here is a working example below.
<form>
<div class="container" id="ElementContainer">
<div id="ElementToClone">
<div class="row">
<div class="col col-md-4">
<div class="form-group">
<input class="form-control" type="text" name="elem[0]" id="elem_0" data-val="true" data-val-required="Required.">
</div>
</div>
</div>
</div>
</div>
<div class="pt-3">
<button type="button" class="btn btn-primary" onclick="Clone()">Clone</button>
<button type="submit" class="btn btn-primary ml-3">Submit</button>
</div>
</form>
<script>
function Clone() {
var $container = $('#ElementContainer');
var $elem = $('#ElementToClone');
var $form = $container.closest('form');
//duplicate x times
for (var i = 1; i <= 5; i++) {
var clonedHtml = $elem.html();
//create a unique name
clonedHtml = clonedHtml.replace('elem[0]', 'elem[' + i + ']');
//create an unique id (not required for validate to function)
clonedHtml = clonedHtml.replace('elem_0', 'elem_' + i);
//append the cloned element
$container.append(clonedHtml);
}
//remove validation from the inital input elements or it won't work
$form.removeData('validator').removeData('unobtrusiveValidation');
//bind the validation again
$.validator.unobtrusive.parse($form);
}
</script>
P.S. tested on MVC, not Core. But it should work the same since it is front-end anyways.

asp-validation-summary blocking back button

I have a page with a form doing validation on the model. The problem is its blocking the cancel button.
When the user clicks the cancel button its forcing them to supply a new password and confirm it. It should just send them back to the previous page.
#model Auth.Controllers.Account.RecoverPasswordViewModel
<div class="mdl-typography--text-center">
<h2 class="mdl-typography--headline">Gendan kodeord</h2>
<p class="mdl-typography--body-1">Gendand kodeord til din konto</p>
</div>
<div asp-validation-summary="ModelOnly" class="mdl-color-text--red-400"></div>
#using (Html.BeginForm("RecoverPassword", "Account", FormMethod.Post, new {#class = "form-horizontal", role = "form"})) {
<input type="hidden" asp-for="Code" />
<fieldset>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" asp-for="NewPassword" type="password" autocomplete="off" required autofocus/>
<label class="mdl-textfield__label" asp-for="NewPassword">Nyt kodeord</label>
<span asp-validation-for="NewPassword" class="mdl-textfield__error"></span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" asp-for="ConfirmNewPassword" type="password" autocomplete="off" required/>
<label class="mdl-textfield__label" asp-for="ConfirmNewPassword">Bekræft nyt kodeord</label>
<span asp-validation-for="ConfirmNewPassword" class="mdl-textfield__error"></span>
<input type="hidden" asp-for="ReturnUrl" value="#Model.ReturnUrl" />
</div>
<div class="actions">
<button class="mdl-button mdl-button--primary" onclick="window.history.back()" causesvalidation="false">Gå tilbage</button>
<button class="mdl-button mdl-button--primary mdl-button--raised mdl-js-button mdl-js-ripple-effect">Gem</button>
</div>
</fieldset>
}
I tried adding causesvalidation="false" on the go back button but it didnt help. Is there a way to force it to only validate on the save button?

Don't use windows.history.back(), use redirect (RedirectToAction and the like).
windows.history.back() will trigger the previous request to be resent (if you came there from a post request) which is undesired behavior.
Instead create a link
<a class="mdl-button mdl-button--primary mdl-button--raised mdl-js-button mdl-js-ripple-effect"
asp-controller="MyController" asp-action="Index">Back</a>

pass textbox value as parameter to controller route

I'm trying to use a textbox value in controller route and am having some trouble with the syntax. Essentially, I have my end users selecting a file and then submitting the data to the api to process and send the data off. I have working static code below, but can't get the xml path to be dynamically populated via the textbox value.
note that (as far as I can tell) the forward slash at the end of the path is required since there is a dot in the file path.
#using (Html.BeginForm("", "api/food/dummy food file.xml/"))
{
<div class="row">
<div class="col-lg-6">
<label class="control-label">Select File</label>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-default">
Browse… <input type="file" style="display: none;" single>
</span>
</label>
<input id="food.filepath" name="food.filepath" type="text" class="form-control" readonly>
</div>
</div>
</div>
<br />
<div>
<button id = "btnSubmit" type="submit" class="btn btn-primary">Submit</button>
</div>
}
I don't what the syntax would be, but I can't get something like the below to work.
#using (Html.BeginForm("", "api/food/" + food.filepath + "/"))
{
<div class="row">
<div class="col-lg-6">
<label class="control-label">Select File</label>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-default">
Browse… <input type="file" style="display: none;" single>
</span>
</label>
<input id="food.filepath" name="food.filepath" type="text" class="form-control" readonly>
</div>
</div>
</div>
<br />
<div>
<button id = "btnSubmit" type="submit" class="btn btn-primary">Submit</button>
</div>
}

Because the form is rendered on server and the value food.filepath is on client, you cannot mix them. Changing form action according to client values need to be done on client with javascript.
You can remove the file from action a add it on submit javascript action, for example by changing BeginForm to this:
#using (Html.BeginForm("", "api/food/", FormMethod.Get, new { onSubmit = "this.dataset.act = this.dataset.act||this.action; this.action = this.dataset.act + this['food.filepath'].value" } ))

elements generated with javascript or jquery not being posted in mvc 5 c#

collection of elements not being posted if generated with jquery or javascript
i have read these articles
from codeprojectfrom haakedfrom SO
all these solutions works only if elements are generated with razor but if i generate it with jquery or javascript data don't get posted even when names and ids are same and poperly generated with indexes Html below is from page source.
<div id="formGroup-123" class="frmgrp form-group">
<div class="col-sm-3">
<label class="center-block">Name</label>
<input maxlength="100" name="[0].kmpName" id="[0].kmpName" type="text" class="form-control kmpName">
<span class="field-validation-valid text-danger" data-valmsg-for="[0].kmpName"
data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block">Email</label>
<input maxlength="200" name="[0].kmpMail" id="[0].kmpMail" type="text" class="form-control kmpMail">
<span class="field-validation-valid text-danger" data-valmsg-for="[0].kmpMail"
data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block">Phone</label>
<input name="[0].kmpPhone" id="[0].kmpPhone" maxlength="15" type="text" class="form-control kmpPhone">
<span class="field-validation-valid text-danger" data-valmsg-for="[0].kmpPhone"
data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block"> </label>
<i class="fa fa-minus"></i>
<i class="fa fa-plus"></i>
</div>
</div>
i append multiple times this html block to a div thats not visible in page source however it can be seen using inspect element option in chrome browser.
i am posting below
<div class="frmgrp form-group" id="formGroup-2">
<div class="col-sm-3">
<label class="center-block">Name</label>
<input name="[2].kmpName" maxlength="15" type="text" class="form-control kmpName" id="[2].kmpName">
<span class="field-validation-valid text-danger" data-valmsg-for="[2].kmpName" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block">Email</label>
<input name="[2].kmpMail" type="text" class="form-control kmpMail" id="[2].kmpMail">
<span class="field-validation-valid text-danger" data-valmsg-for="[2].kmpMail" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block">Phone</label>
<input name="[2].kmpPhone" type="text" class="form-control kmpPhone" id="[2].kmpPhone">
<span class="field-validation-valid text-danger" data-valmsg-for="[2].kmpPhone" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block"> </label>
<a href="javascript:void(0);" class="btnminus btn btn-warning" id="minus-2">
<i class="fa fa-minus"></i></a>
<i class="fa fa-plus"></i>
</div>
</div>
<div class="frmgrp form-group" id="formGroup-3">
<div class="col-sm-3">
<label class="center-block">Name</label>
<input name="[3].kmpName" maxlength="15" type="text" class="form-control kmpName" id="[3].kmpName">
<span class="field-validation-valid text-danger" data-valmsg-for="[3].kmpName" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block">Email</label>
<input name="[3].kmpMail" type="text" class="form-control kmpMail" id="[3].kmpMail">
<span class="field-validation-valid text-danger" data-valmsg-for="[3].kmpMail" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block">Phone</label>
<input name="[3].kmpPhone" type="text" class="form-control kmpPhone" id="[3].kmpPhone">
<span class="field-validation-valid text-danger" data-valmsg-for="[3].kmpPhone" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block"> </label>
<a href="javascript:void(0);" class="btnminus btn btn-warning" id="minus-3">
<i class="fa fa-minus"></i></a>
<i class="fa fa-plus"></i>
</div>
</div>
at controller
public ActionResult Save(other_form_data m, IEnumerable<KMP> n)
{
and kmp class is
public class KMP
{
public string kmpName { get; set; }
public string kmpMail { get; set; }
public string kmpPhone { get; set; }
}
at controller list fetches only one object(i.e. first row of controls [0].name,[0].email,[0].phone) dynamically values from dynamically appended elements are not being posted.
plese guide me how to make it work with jquery generated controls

name attribute of "formgroup-2" and "formgroup-3" are not in correct order. That's why only one row of data is present.
Name of elements should be [1].KmpName for formgroup-2. Similarly it should be [2].KmpName for formgroup-2
As Stephen commented, this is not related to razor. The default mvc model binder will check all the elements in DOM or view page and binds or map it to the parameters in action method.
I haven't tested it, but this should work
<div class="frmgrp form-group" id="formGroup-2">
<div class="col-sm-3">
<label class="center-block">Name</label>
<input name="[1].kmpName" maxlength="15" type="text" class="form-control kmpName" id="[2].kmpName">
<span class="field-validation-valid text-danger" data-valmsg-for="[2].kmpName" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block">Email</label>
<input name="[1].kmpMail" type="text" class="form-control kmpMail" id="[2].kmpMail">
<span class="field-validation-valid text-danger" data-valmsg-for="[2].kmpMail" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block">Phone</label>
<input name="[1].kmpPhone" type="text" class="form-control kmpPhone" id="[2].kmpPhone">
<span class="field-validation-valid text-danger" data-valmsg-for="[2].kmpPhone" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block"> </label>
<a href="javascript:void(0);" class="btnminus btn btn-warning" id="minus-2">
<i class="fa fa-minus"></i></a>
<i class="fa fa-plus"></i>
</div>
</div>
<div class="frmgrp form-group" id="formGroup-3">
<div class="col-sm-3">
<label class="center-block">Name</label>
<input name="[2].kmpName" maxlength="15" type="text" class="form-control kmpName" id="[3].kmpName">
<span class="field-validation-valid text-danger" data-valmsg-for="[3].kmpName" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block">Email</label>
<input name="[2].kmpMail" type="text" class="form-control kmpMail" id="[3].kmpMail">
<span class="field-validation-valid text-danger" data-valmsg-for="[3].kmpMail" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block">Phone</label>
<input name="[2].kmpPhone" type="text" class="form-control kmpPhone" id="[3].kmpPhone">
<span class="field-validation-valid text-danger" data-valmsg-for="[3].kmpPhone" data-valmsg-replace="true"></span>
</div>
<div class="col-sm-3">
<label class="center-block"> </label>
<a href="javascript:void(0);" class="btnminus btn btn-warning" id="minus-3">
<i class="fa fa-minus"></i></a>
<i class="fa fa-plus"></i>
</div>
</div>
Note: Your div elements use the id in correct order. If possible you can use that to correct the name attribute
Correct index can be added to element's name using following code
function addIndex(template) {
var fieldNames = ['KmpName', 'KmpMail', 'KmpPhone'];
var groupList = document.getElementsByClassName('frmgrp form-group');
var index = parseInt(groupList[groupList.length - 1].id);
var elements = $(template).find('input');
for(var i =0, len = elements.length; i<length; i++)
elements[i].name = '[' + index + '].' + fieldNames[i];
}

How to send email contact us form in ASP.NET C#

As i have build the form and now i want the information directly to my mail inbox, but when client click on send the mailto option comes from the default mailing side , How can i get mail direct on my email when the client fill the contact us form as the code is bellow, and the link of the page is contact us link
<form class="well form-horizontal" action="" method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend class="ContactUsHeading">Contact Us !</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">First Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Phone #</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="(845)555-1212" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<!-- Text input-->
<!-- Select Basic -->
<!-- Text input-->
<!-- Text input-->
<!-- radio checks -->
<div class="form-group">
<label class="col-md-4 control-label">Your</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="Company" value="yes" /> Company
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="company" value="no" /> Individual
</label>
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Project Description</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary" >Send <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
</div>
<!-- /.container -->