Allow only numeric data
<input id="primaryLocationNumber" ng-model="PrimaryLocationId" type="number" class="form-control" />
Set initial selected value
<input id="primaryLocationNumber" ng-model="PrimaryLocationId" type="number" class="form-control" />
.panel{ text-align: center; }
table { margin:0 auto; }
.panel{ margin-right:auto;
margin-left:auto;
}
.mainBody{ margin: 100px 250px; border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 1303px; height: 703px; }
.text-change { text-transform: none; } .text-change { text-transform: capitalize; } .text-change { text-transform: uppercase; } .text-change { text-transform: lowercase; }
input[type=text],input[type=password],textarea { width:150px; }
span#mySpan {display:block; }
container{ background-color:#ccc; height: 200px; width:200px; border-color: #000; border-style: solid }
.ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}
Edit in plunkr
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Model Pop up</title> <script src="Scripts/jquery-1.10.2.js"></script> <script src="Scripts/Custom-jquery-ui.min.js"></script> <link href="Content/bootstrap.css" rel="stylesheet"/> <script src="Scripts/bootstrap.min.js"></script> </head> <body> <div class="side-menu" id="sideMenu"> <menu> <ul class="nav nav-tabs nav-stacked"> <li> <a href="#myModal" data-backdrop="true" data-toggle="modal">Click Me</a> </li> </ul> </menu> </div> <div id="myModal" class="modal fade"> <div class="modal-dialog" > <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Title</h4> </div> <div class="modal-body"> <input type="text" /> <p>Body</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" id="save" class="btn btn-primary">Save changes</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </body> </html>
script
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery validate</title> <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> <script src="Scripts/jquery-1.10.2.js"></script> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> </head> <body> <form id="form" class="form" name="ContactForm" method="POST"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="col-md-3"> <label for="FirstName"> First Name </label> <input type="text" class="form-control required" id="FirstName"> </div> <div class="col-md-3 "> <label for="LastName"> Last Name </label> <input type="text" class="form-control" id="LastName"> </div> </div> <div class="col-md-12"> <div class="col-md-3 "> <label for="Email"> Email </label> <input type="text" class="form-control required email" id="Email"> </div> </div> <div class="col-md-12"> <div class="col-md-3 "> <button type="submit" class="btn btn-primary "> Submit </button> </div> </div> </div> </div> </form> </body> </html> Java Script
<script type="text/javascript"> $(document).ready(function () { $('.form').validate({ }); }); </script>
Java Script