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.

Disable other form inputs in ASP.NET Core MVC (C#)

I'm using ASP.NET Core MVC and don't know how validate my form properly.
I want to disable my other form inputs if one gets filled. If the user decides to delete his input all elements should be enabled again.
Here's my code:
<form enctype="multipart/form-data" asp-controller="certificate" asp-action="index" method="post" class="mt-3">
<div class="form-group row">
<label asp-for="Hostname" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Hostname" class="form-control" placeholder="Hostname">
<span asp-validation-for="Hostname" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Content" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<textarea asp-for="Content" class="form-control" placeholder="Copy your File-Content here" id="content"></textarea>
<span asp-validation-for="Content" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="FileDirectory" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<div class="custom-file">
<input asp-for="FileDirectory" accept=".pem, .der" class="form-control custom-file-input">
<label class="custom-file-label">Choose File...</label>
</div>
</div>
</div>
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group row">
<div class="col-sm-12">
<input type="submit" class=" float-right" value="Next"/>
</div>
</div>
</form>
Please let me know if you have any solution.

Do you mean you want to disable other inputs when the input you filled is not valid?If so,here is a demo:
Model:
public class ValidationModel1
{
[Required]
public string Hostname { get; set; }
[Required]
public string Content { get; set; }
public IFormFile FileDirectory { get; set; }
}
View:
<form enctype="multipart/form-data" method="post" class="mt-3" id="myform">
<div class="form-group row">
<label asp-for="Hostname" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Hostname" class="form-control" placeholder="Hostname" onblur="check(this)">
<span asp-validation-for="Hostname" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Content" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<textarea asp-for="Content" class="form-control" placeholder="Copy your File-Content here" id="content" onblur="check(this)"></textarea>
<span asp-validation-for="Content" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="FileDirectory" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<div class="custom-file">
<input asp-for="FileDirectory" accept=".pem, .der" class="form-control custom-file-input">
<label class="custom-file-label">Choose File...</label>
</div>
</div>
</div>
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group row">
<div class="col-sm-12">
<input type="submit" class=" float-right" value="Next" />
</div>
</div>
</form>
js($("#myform").valid() will validate the form.):
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script>
function check(t) {
var id = $(t).attr("Id");
$("#myform").valid()
if (document.getElementById(id).classList.contains("input-validation-error")) {
$(".form-control").each(function () {
if ($(this).attr("Id") != id) {
$(this).attr("disabled", "disabled");
}
})
} else {
$(".form-control").each(function () {
$(this).removeAttr("disabled");
})
}
}
</script>
result:
Update:
js:
function check(t) {
var id = $(t).attr("Id");
//$("#myform").valid()
if ($(t).val() != "") {
$(".form-control").each(function () {
if ($(this).attr("Id") != id) {
$(this).attr("disabled", "disabled");
}
})
} else {
$(".form-control").each(function () {
$(this).removeAttr("disabled");
})
}
}
result:

Insert a combobox inside view in .NET Core

I have a view page to insert some data.
here is the model:
#model BookListMVC.Models.Book
I need to insert a combobox linked to another table "Categories".
The compiler does not allow me to insert multiple models because that is probably not the right way.
How I can insert a combobox linked to "Categories" that point to book "IdCategory" ?
Here the actual code full inside:
#model BookListMVC.Models.Book
<br />
<h2 class="text-info">#(Model.Id!=0 ? "Edit" : "Create") Book</h2>
<br />
<div class="border container" style="padding:30px;">
<form method="post">
#if (Model.Id != 0)
{
<input type="hidden" asp-for="Id" />}
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
<div class="form-group row">
<div class="col-3">
<label asp-for="Name"></label>
</div>
<div class="col-6">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-3">
<label asp-for="Author"></label>
</div>
<div class="col-6">
<input asp-for="Author" class="form-control" />
<span asp-validation-for="Author" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-3">
<label asp-for="ISBN"></label>
</div>
<div class="col-6">
<input asp-for="ISBN" class="form-control" />
<span asp-validation-for="ISBN" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-3">
<label asp-for="ISBN"></label>
</div>
<div class="col-6">
<input asp-for="ISBN" class="form-control" />
<span asp-validation-for="ISBN" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-3 offset-3">
<button type="submit" class="btn btn-primary form-control">
#(Model.Id != 0 ? "Update" : "Create")
</button>
</div>
<div class="col-3">
<a asp-action="Index" class="btn btn-success form-control">Back to List</a>
</div>
</div>
</form>
</div>

You can insert the combobox model through ViewBag or ViewData. For example.
public IActionResult Index()
{
//The data can be obtained from database.
ViewBag.Categories = new List<SelectListItem>
{
new SelectListItem{ Text="history", Value="1"},
new SelectListItem{ Text="literature", Value="2"},
};
var model = new Book { Id = 2, Author="author", ISBN="isbn", Name="bookname" };
return View(model);
}
This is the simple combobox in the view.
<div class="form-group row">
<div class="col-3">
<label asp-for="categories"></label>
</div>
<div class="col-6">
<select asp-for="categories" name="CategoryId" asp-items="ViewBag.Categories">
<option>-- select the category --</option>
</select>
<span asp-validation-for="categories" class="text-danger"></span>
</div>
</div>
Model (Categories)
public class Categories
{
public int CategoryId { get; set; }
public string CategoryName { get; set; }
}
Result
You can add a property CategoryId in model Book, even add a property Categories.
public class Book
{
public int CategoryId { get; set; }
public Categories categories { get; set; }
}
If you want to pass the object Categories to the bakend, you can add a hidden input box and relative javascript.
Add hidden box.
<div class="form-group row">
<div class="col-3">
<label asp-for="categories"></label>
</div>
<div class="col-6">
<select onchange="changeName()" asp-for="categories" name="categories.CategoryId" asp-items="ViewBag.Categories">
<option>-- select the category --</option>
</select>
<input type="hidden" name="categories.CategoryName" value="" id="categoryName"/>
<span asp-validation-for="categories" class="text-danger"></span>
</div>
</div>
Add javascript.
#section Scripts{
<script>
function changeName() {
var index = document.getElementById("categories").selectedIndex;
var text = document.getElementById("categories").options[index].text;
document.getElementById("categoryName").value=text
}
</script>
}
Then you can get all data include Categories and can handling Categories table.

Submit Button doesn't submit in ASP.NET MVC

Submit button doesn't submit out of a sudden in ASP.NET MVC when creating a new user when it worked previously. It did not show any invalid input or valid input. I'm not sure where the problem went wrong. Any suggestion would be helpful.This problem has been happening twice and the solution that I have done so far is recreating a new project which I think is not practical.
Here is my code to review.
Admincontroller.cs
[HttpPost]
public IActionResult CreateUser(Users usr)
{
// TODO: L09 Task 5 - Write secure code to insert TravelUser into database
if (!ModelState.IsValid)
{
ViewData["Message"] = "Invalid Input";
ViewData["MsgType"] = "warning";
return View("CreateUser");
}
else
{
string insert = #"INSERT INTO WBUsers(UserId, UserPw,FullName, Email, UserRole,Dob,ContactNo,usr.Billing_Address)
VALUES('{0}', HASHBYTES('SHA1','{1}'),'{2}','{3}','{4}','{5}',{6},'{7}')";
// TODO: L10 Task 2a - Provide the SQL statement to reset member"
if (DBUtl.ExecSQL(insert, usr.UserId, usr.UserPw, usr.FullName, usr.Email, usr.UserRole, usr.Dob, usr.ContactNo, usr.Billing_Address) == 1)
{
string template = #"Hi {0},<br/><br/>
Welcome to Ecommerce!
Your userid is <b>{1}</b> and password is <b>{2}</b>. Please change your password upon login.
<br/><br/>Adminstrator";
string title = "Account Sign Up";
string message = String.Format(template, usr.FullName, usr.UserId, usr.UserPw);
string result = "";
bool outcome = false;
// TODO: L10 Task 2b - Call EmailUtl.SendEmail to send email
// Uncomment the following line with you are done
outcome = EmailUtl.SendEmail(usr.Email, title, message, out result);
if (outcome)
{
ViewData["Message"] = "Account Has Been Created";
ViewData["MsgType"] = "success";
}
else
{
ViewData["Message"] = result;
ViewData["MsgType"] = "warning";
}
}
else
{
ViewData["Message"] = DBUtl.DB_Message;
ViewData["MsgType"] = "danger";
}
return View("CreateUser");
}
}
CreateUser.cshtml
#model SignUp2.Models.Users;
<link href="~/lib/dtpicker/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<script src="~/lib/dtpicker/js/tempusdominus-bootstrap-4.min.js"></script>
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script language="javascript">
$(document).ready(function () {
// DateA
$('#JSDateA')
.datetimepicker({ format: 'YYYY-MM-DD' });
});
</script>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="~/lib/styles/createform.css">
</head>
<body>
<div class="center">
<form asp-controller="Admin" asp-action="CreateUser" method="post">
<h3>Registration Form</h3>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="UserId">Username:<span style="color:red;">*</span></label>
<div class="col-sm-5">
<input asp-for="UserId" placeholder="User ID" class="form-control" />
</div>
<div class="col-sm-3">
<span asp-validation-for="UserId" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="FullName">Full Name:<span style="color:red;">*</span> </label>
<div class="col-sm-5">
<input asp-for="FullName" placeholder="Full Name" class="form-control" />
</div>
<div class="col-sm-3">
<span asp-validation-for="FullName" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="Email">Email:<span style="color:red;">*</span> </label>
<div class="col-sm-5">
<input asp-for="Email" placeholder="Email" class="form-control" />
</div>
<div class="col-sm-3">
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="UserPw">Password:<span style="color:red;">*</span> </label>
<div class="col-sm-5">
<input asp-for="UserPw" placeholder="Password" class="form-control" />
</div>
<div class="col-sm-3">
<span asp-validation-for="UserPw" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="Dob">Birth Date:<span style="color:red;">*</span></label>
<div class="col-sm-5">
<input asp-for="Dob" asp-format="{0:yyyy-MM-dd}"
class="form-control" placeholder="YYYY-MM-DD" />
</div>
<span asp-validation-for="Dob" class="text-danger"></span>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="ContactNo">Contact Number:<span style="color:red;">*</span></label>
<div class="col-sm-5">
<input asp-for="ContactNo" class="form-control" placeholder="Contact Number" />
</div>
<div class="col-sm-3">
<span asp-validation-for="ContactNo" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="Billing_Address">Billing Address:<span style="color:red;">*</span> </label>
<div class="col-sm-5">
<input asp-for="Billing_Address" class="form-control" placeholder="Billing Address" />
</div>
<div class="col-sm-3">
<span asp-validation-for="Billing_Address" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3">User Role:<span style="color:red;">*</span> </label>
<div class="col-sm-6">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rb1"
asp-for="UserRole" value="user" checked />
<label class="form-check-label" for="rb1">User</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rb2"
asp-for="UserRole" value="admin" />
<label class="form-check-label" for="rb2">Admin</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-3 col-sm-6">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</div>
#if (ViewData["Message"] != null)
{
<div class="form-group row">
<div class="offset-sm-2 col-sm-6">
<div class="alert alert-#ViewData["MsgType"]">
#Html.Raw(ViewData["Message"])
</div>
</div>
</div>
}
</form>
</div>
</body>

How to bind list values(array) in Viewbag

Here i am getting values in viewbag but i am unable to bind the values to fields.And this is my code
#foreach (RankedServices.Business.UIModels.Services cc in ViewBag.selectedCommonCriteria)
{
<div class="row" style="margin-top:10px;">
<div class="col-lg-5">
<div class="form-group">
<label class="control-label col-sm-12">Awards:</label>
<div class="col-sm-12">
<input type="text" class="form-control" name="Awards" id="Awards" placeholder="Enter Awards" value="#cc.SelectedCC[0].Awards"/>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="form-group">
<label class="control-label col-sm-12">Certifications:</label>
<div class="col-sm-12">
<input type="text" class="form-control" name="Certifications" id="Certifications" placeholder="Enter Certifications" value="#cc.SelectedCC[0].Certifications" />
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:10px;">
<div class="col-lg-5">
<div class="form-group">
<label class="control-label col-sm-12">Associations:</label>
<div class="col-sm-12">
<input type="text" class="form-control" name="Associations" id="Associations" placeholder="Associations" value="#cc.SelectedCC[0].Associations"/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label col-sm-12">Share your areas of expertise and how you can best help customers:</label>
<div class="col-sm-12">
<textarea class="form-control" name="AdditionalInfo" id="AdditionalInfo" placeholder="Please tell your customers about your interests, specialities and expertise" rows="2" value="#cc.SelectedCC[0].AdditionalInfo"></textarea>
</div>
</div>
</div>
</div>
}
And i am getting error : "Cannot implicitly convert type 'RankedServices.Business.UIModels.Services' to 'System.Collections.IEnumerable'. An explicit conversion exists (are you missing a cast?)"
How should i bind the vlaues.

Assuming your ViewBag.selectedCommonCriteria is an IEnumerable of type Services then you can do this:
#foreach (RankedServices.Business.UIModels.Services cc in (IEnumerable<RankedServices.Business.UIModels.Services>)ViewBag.selectedCommonCriteria)
You're using a ViewBag which is a dynamic object so in order to use it for anything other than what every object can do (for example ToString()) you must cast it to it's appropriate type.