We Keep Coding

ASP.Net Core Client Side Validation not working

I am using ASP.Net Core 5.0. I am trying to get my client side validation to work so that when you tab out of a required field, if the field is blank and required, the error message appears.
In my model I have -
[Required(ErrorMessage = "Please enter in the name.")]
[MaxLength(100, ErrorMessage = "The maximum length for the name is 100 characters.")]
public string Name { get; set; }
I have a partial view _ValidationScriptsPartial.cshtml which contains -
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
In my view I have -
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Also in the view I have the field -
<div class="form-row">
<div class="col-md-7">
<div class="row">
<label asp-for="Name" class="control-label col-md-3">Name</label>
<div class="col-md-8 mb-2">
<input asp-for="Name" class="form-control" maxlength="100" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
</div>
</div>
When the code is run the html is -
<div class="col-md-8 mb-2">
<input class="form-control" maxlength="100" type="text" data-val="true" data-val-maxlength="The maximum length for the name is 100 characters." data-val-maxlength-max="100" data-val-required="Please enter in the name." id="Name" name="Name" value="The Name">
<span class="text-danger field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
When I clear the field and I tab out, nothing happens! I have noticed that the value attribute of the field in HTML is not cleared. Is that the problem and if so, why is not clearing?
Am I missing anything?
Thanks

Fill several times content of same form fields and write it into several lines of a database

I have built a form. I put a button inside this form called "Add a book". When a user clicks two fields appear : "bookname" and "bookdate" :
<div class="form-group col-md-3">
<a class="btn btn-success" onclick="add()" href="#">
<i class="glyphicon glyphicon-plus icon-white"></i>Add a book
</a>
</div>
<div id="wrapper">
<!-- champs du formulaire -->
<div class="form-group col-md-12" id="add" style="display:none;">
<!-- Bookname -->
<div class="form-row">
<div class="form-group col-md-3">
<label for="exampleInputPassword1">Name of book</label>
<input type="text" class="form-control" id="bookname" name="bookname">
</div>
</div>
<!-- Bookdate -->
<div class="form-row">
<div class="form-group col-md-3">
<label for="exampleInputPassword1">Date of book</label>
<input type="text" class="form-control" id="bookdate" name="bookdate">
</div>
</div>
</div>
</div>
When there is only one book, there are no problem to validate the form and write the "bookname" and "bookdate" to the project database. It's very common.
My question is : for example if a user clicks 3 times on the "add book" button and fills 3 times the "bookname" and "bookdate" fields , how could I do in the code to save all that into three different lines in the database ?
That is to say :
bookname bookdate
name1 date1
name2 date2
name3 date3
I don't see how i could do ?
Any help would be very appreciated.
Thank you !

You need to change the name attribute on your bookname and bookdate inputs to array notation i.e.
<input type="text" class="form-control" id="bookname" name="bookname[]">
<input type="text" class="form-control" id="bookdate" name="bookdate[]">
Then, in your PHP code, you will find that $_POST['bookname'] and $_POST['bookdate'] are now arrays of values, so you can iterate through them e.g.
foreach ($_POST['bookname'] as $k => $bookname) {
$bookdate = $_POST['bookdate'][$k];
// write bookname and bookdate to database
...
}

Something is causing my page to keep loading in the center?

I've been able to narrow down where the 'error' occurs, which is within the credit card form section:
<div class="form-group">
<label for="cardNumber">Your card number</label>
<div class="input-group">
<input
type="tel"
class="form-control card-number input-medium"
name="cardNumber"
placeholder="Enter Your Valid Card Here"
autocomplete="cc-number"
required autofocus
value=""
/>
<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
</div>
</div>
<div class="form-group">
<label for="cardNumber">Your Email Address</label>
<div class="input-group">
<input
type="email"
class="form-control"
name="email"
placeholder="Enter Your Valid Email Here"
required autofocus
value=""
/>
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
</div>
</div>
My suspicious are that the form I'm using (which uses the Stripe API) has a customer error reporting feature, so if for example the customer's card has expired then an error pops up just above the 'form-group' code shown above - and also in the php and javascript there is a reference to .index.php which is at the bottom of the page here:
<script>
$('.close').click(function(){
window.location.href='index.php';
});
</script>
But that's only my hunch....
Any ideas why this page is behaving like this? Thanks!

Answer = remove 'autofocus' - thanks to #Rick

Tab key is not working using HTML and javascript

I have one issue in Tab key enter using HTML.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">User Name :</span>
<div ng-class="{ 'myError': billdata.uname.$touched && billdata.uname.$invalid }">
<input type="text" name="uname" id="uname" class="form-control" placeholder="add user Name" ng-model="login_name" ng-minlength="6" ng-keypress="clearField('uname');" >
</div>
</div>
<div class="help-block" ng-messages="billdata.uname.$error" ng-if="billdata.uname.$touched">
<p ng-message="minlength" style="color:#F00;">This field is too short.The min length of your user name should be 6.</p>
</div>
<div class="input-group bmargindiv1 col-md-12" ng-hide="showpass">
<span style="position:absolute; right:5px; margin-top:6px; top:0px;"><button class="btn btn-xs btn-success"ng-mousedown="hideShowPassword();" ng-mouseup="hideShowPassword();" ng-mouseleave="hidePassAfterLeave();" ><i class="fa fa-eye"></i></button></span>
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<div ng-class="{ 'myError': billdata.pass.$touched && billdata.pass.$invalid }">
<input type="{{inputType}}" name="pass" id="passno" class="form-control" placeholder="password" ng-model="password" ng-minlength="8" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!##\$%\^&\*])(?=.{8,})/" ng-keypress="clearField('passno');" >
</div>
</div>
In the above code suppose user's focus first in the user name field.In this condition when user is pressing tab key focus is not moving to password field but 2 times pressing the tab key the focus is happening on password field.Here i need for first time pressing tab key the focus should go to password field.Please help me.

Set attribute
tabindex="-1"
to the posts you want to skip
Check this fiddle:
JSFIDDLE

Can not validate email field using angular.js

I have one issue in validation of email using Angular.js.In my code i am using ng-message to display the validation message.for some invalid type email(e.g-#abc.com),it showing the validation message but in some case if i am typing like this .com#abc its not showing any validation message.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Email Id :</span>
<div ng-class="{ 'has-error': billdata.email.$touched && billdata.email.$invalid }">
<input type="email" name="email" id="contactno" class="form-control" placeholder="User email" ng-model="user_email" >
</div>
</div>
<div class="help-block" ng-messages="billdata.email.$error" ng-if="billdata.email.$touched">
<p ng-message="email" style="color:#F00;">This needs to be a valid email</p>
</div>
Here i need this field will validate with proper email format(i.e-abc#gmail.com).Please help me to resolve this issue.