Client-side Required error message not showing - asp.net-mvc

Question

I want to implement client side validation on my form, but none of the required error message is showing when I not putting data.
Scripts are loaded correctly in the layout file.
And in the rest of the views, Required messages are displayed correctly and the program works correctly .
I've sent the codes for this subject to the attachment.
controller:
<HttpPost()>
Function GalleryFiles1(ByVal docs As MachininfoDocs, ByVal imgUp As HttpPostedFileBase) As ActionResult
If ModelState.IsValid Then
If imgUp IsNot Nothing And IsImage(imgUp) Then
docs.FileName = Guid.NewGuid().ToString() & Path.GetExtension(imgUp.FileName)
docs.DocGroup = 1
docs.MachininfoID = PVMachinInfoId
imgUp.SaveAs(Server.MapPath("/Images/MachinImages/" & docs.FileName))
Dim img As New ImageResizer()
img.Resize(Server.MapPath("/Images/MachinImages/" & docs.FileName), Server.MapPath("/Images/MachinImages/Thumb/" & docs.FileName))
db.MachininfoDocs.Add(docs)
db.SaveChanges()
End If
End If
Return RedirectToAction("GalleryFiles1", New With {Key .id = docs.MachininfoID})
End Function
View:
#ModelType Machinary.MachininfoDocs
#Code
ViewData("Title") = "اسناد مالکیت"
Layout = "~/Views/Shared/_Layout.vbhtml"
End Code
#Using (Html.BeginForm("GalleryFiles1", "Machininfo", FormMethod.Post, New With {.enctype = "multipart/form-data"}))
#Html.AntiForgeryToken()
#Html.HiddenFor(Function(model) model.MachininfoID)
#<div Class="panel">
<header Class="panel-heading tab-bg-dark-navy-blue">
<Label Class="bg-transparent wht-color"> اطلاعات جامع ماشین آلات- اسناد مالکیت</Label>
</header>
<br />
<div Class="form-horizontal panel-body">
<div class="col-md-4">
#Html.ValidationSummary(True, "", New With {.class = "text-danger"})
<div class="form-group">
#Html.LabelFor(Function(model) model.Title, htmlAttributes:=New With {.class = "control-label col-md-2"})
<div class="col-md-10">
#Html.EditorFor(Function(model) model.Title, New With {.htmlAttributes = New With {.class = "form-control"}})
#Html.ValidationMessageFor(Function(model) model.Title, "", New With {.class = "text-danger"})
</div>
</div>
<div class="form-group">
#Html.LabelFor(Function(model) model.FileName, htmlAttributes:=New With {.class = "control-label col-md-2"})
<div class="col-md-10">
<input type="file" name="imgUp" class="form-control-file" />
#Html.ValidationMessageFor(Function(model) model.FileName, "", New With {.class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="ثبت" class="btn btn-success" />
</div>
</div>
<br />
</div>
<div class="col-md-8">
#code
Dim al As List(Of MachininfoDocs) = ViewBag.Docs
End code
<Table Class="table table-bordered table-responsive-sm">
<tr>
<th class="col-md-3"> تصویر</th>
<th class="col-md-7"> عنوان</th>
<th>
</th>
</tr>
#For Each item In al
#<tr id="tbrow_#(item.Id)">
<td>
<img style="width:100% ; height:120px" src="~/Images/MachinImages/Thumb/#item.FileName" class=" img-thumbnail" />
</td>
<td>
#item.Title
</td>
<td>
<a class="btn btn-sm btn-danger" onclick="DeleteTbRow(#item.Id)">
<i class="glyphicon glyphicon-trash btn btn-danger btn-sm"></i>
</a>
</td>
</tr>
Next
</Table>
</div>
</div>
</div>
End Using
<div class="pull-left btn btn-default">
#Html.ActionLink("برگشت به لیست", "Index")
</div>
#section MyScripts
<script>
function DeleteTbRow(id) {
if (confirm('آیا از حذف مطمئن هستید ؟')) {
$.get("/Machininfo/DeleteGallery/" + id,
function () {
$("#tbrow_" + id).hide('slow');
});
}
}
</script>
End Section
MetaData class:
Imports System.ComponentModel
Imports System.ComponentModel.DataAnnotations
Friend Class MachininfoDocsMetaData
<ScaffoldColumn(False)>
<Bindable(False)>
Public Property Id As Integer
Public Property MachininfoID As Integer
Public Property DocGroup As Integer
<Required(AllowEmptyStrings:=False, ErrorMessage:="لطفاً {0} را به درستی درج نمائید")>
<DisplayName("عنوان")>
<Display(Name:="عنوان")>
<StringLength(200, ErrorMessage:="مقدار {0} نباید بیش از 200 کاراکتر باشد")>
Public Property Title As String
<DisplayName("انتخاب فایل")>
<Display(Name:="انتخاب فایل")>
Public Property FileName As String
End Class
<MetadataType(GetType(MachininfoDocsMetaData))>
Partial Public Class MachininfoDocs
End Class

Answer 1

One common mistake is for who use mvc default bundles forget to import the bundle in the layout
#Scripts.Render("~/bundles/jqueryval")
Also you should activate them in the web.config appsettings
<appSettings>
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
<add key="ValidationSettings:UnobtrusiveValidationMode" value="none" />