Hi dharmendr,
The $(...). validate is not a function error occurs when the jQuery validation plugin is not loaded or the jQuery and related scripts are loaded in an incorrect order.
The validation plugin should be loaded after the jQuery library.
Refer below code.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My ASP.NET Application</title>
@*<link href="/Content/Site.css" rel="stylesheet" type="text/css" />*@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//LoadRoomDetails();
$("#txtRoomId").val("0");
$("#btnSave").click(function (e) {
if (!$("#formRoom").valid()) {
return;
}
//SaveRoomData();
});
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a> </li>
<li><a href="/Home/Contact">Contact</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Service">Service</a></li>
<li><a href="/Room">Room</a></li>
<li><a href="/Booking">Booking</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div style="margin-top:60px">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#divAddRoom" data-backdrop="static" data-keyboard="false"> Add Room </button>
</div>
<div id="divAddRoom" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Room</h4>
</div>
<div class="modal-body">
Here Body Will Come
<form id="formRoom">
<div class="container">
<div class="row">
<input data-val="true" data-val-number="The field Roomid must be a number." data-val-required="The Roomid field is required." id="txtRoomId" name="Roomid" type="hidden" value="0" />
<div class="form-group col-md-3">
<label for="RoomNumber">Room No.</label>
<input class="form-control" data-val="true" data-val-required="Room No Is required" id="txtRoomNumber" name="RoomNumber" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="RoomNumber" data-valmsg-replace="true"></span>
</div>
<div class="form-group col-md-3">
<label for="RoomPrice">Room Price</label>
<input class="form-control" data-val="true" data-val-number="The field Room Price must be a number." data-val-required="Room Price Is required" id="txtRoomPrice" name="RoomPrice" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="RoomPrice" data-valmsg-replace="true"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label for="BookIngStatusid">Room Status</label>
<select class="form-control" data-val="true" data-val-number="The field Room Status must be a number." data-val-required="Room Status Is required" id="ddBookingStatus" name="BookIngStatusid">
<option value="1">Reserved</option>
<option value="2">Available</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="BookIngStatusid" data-valmsg-replace="true"></span>
</div>
<div class="form-group col-md-3">
<label for="RoomTypeid">Room Type</label>
<select class="form-control" data-val="true" data-val-number="The field Room Type must be a number." data-val-required="Room Type Is required" id="ddRoomType" name="RoomTypeid">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label for="RoomCapacity">Room Capcity</label>
<input class="form-control" data-val="true" data-val-number="The field Room Capcity must be a number." data-val-required="Room Capacity Is required" id="txtRommCapacity" name="RoomCapacity" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="RoomCapacity" data-valmsg-replace="true"></span>
</div>
<div class="form-group col-md-3">
<label for="RoomDescription">Room Description</label>
<input class="form-control" data-val="true" data-val-required="Room Desc Is requuired" id="txtRoomDescription" name="RoomDescription" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="RoomDescription" data-valmsg-replace="true"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label for="RoomImage">Room Image.</label>
<input id="UploadImage" type="file" class="form-control" name="roomImage" title="Load Image" onchange="DisplayImage(this)" />
<img id="imgRoom" height="200" width="200" style="border:solid" />
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button id="btnSave" type="button" class="btn btn-success">Save</button>
<button type="button" data-dismiss="modal" class="btn btn-danger">Close</button>
</div>
</div>
</div>
</div>
<div style="margin-top: 10px"></div>
<div id="divLoadRoomDetails">
</div>
<hr />
<footer>
<p>© 2022 - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
Screenshot
