Hi,
I have one form with 6 fields
i am going to do validations on that
coming to my requirements in that
1) if we try to save all the details without entering any values on fields i need to display validation message on below of textbox
2) I need to display validation message in dropdown also after clicking of add button it was displaying like below
if i can type anything on state textbox it was changing the design of form please look at above
I don't need to change the design keep the form as same
Note: i need to display error message at below of the textbox
3) after clicking of close button i don't need to display any error message but here still it was showing message
Finally i need validations in my shared code
@{ Layout = null; }
<html ng-app="myApp">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.css"
rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css"
rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
$scope.mahesh = false;
function GetDepartments() {
debugger;
$scope.countries = [];
$http({
method: 'Get',
url: '/state/GetCountries',
}).success(function (data, status, headers, config) {
$scope.countries = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.AddUpdateEmployee = function (isValid) {
$scope.mahesh = $scope.mahesh ? false : true;
if(isValid){
alert("Form is valid");
}
else{
alert("please fill all the fields");
}
}
$scope.AddStateDiv = function () {
debugger;
$scope.mahesh = $scope.mahesh ? false : true;
GetDepartments();
ClearFields();
$scope.Action = "Add";
}
function ClearFields() {
$scope.STI_Id = "";
$scope.STI_Code = "";
$scope.STI_Name = "";
$scope.STI_Description = "";
$scope.STI_Active = "";
$scope.STI_CoiId = "";
$scope.COI_Name = "";
$scope.STI_GstStateCode = "";
$scope.COI_Id = "";
}
$scope.close = function () {
debugger;
$scope.mahesh = false;
ClearFields()
}
}]);
</script>
</head>
<body ng-controller="myCntrl">
<div class="container">
<div>
<br />
<br />
<br />
<div id="wrapper" class="clearfix" ng-show="mahesh">
<div class="well">
<form name="userForm" novalidate>
<h4 class="modal-title" style="text-align: center;">
{{Action}} State Details</h4>
<div class="form-horizontal">
<div class="form-row">
<div class="col-md-4" ng-class="{ 'has-error' : userForm.COI_Name.$invalid && !userForm.COI_Name.$pristine }">
<label for="COI_Name">
Country</label>
<select class="form-control" name="COI_Name" id="COI_Name" ng-model="COI_Name" containercssclass="all"
ng-options="c.COI_Id as c.COI_Name for c in countries" ng-disabled="disabled"
required>
<option value="">Select Country</option>
</select>
</div>
<div class="col-md-4" ng-class="{ 'has-error' : userForm.STI_Name.$invalid && !userForm.STI_Name.$pristine }">
<label for="STI_Name">
State</label>
<input type="text" class="form-control" name="STI_Name" ng-model="STI_Name" ng-minlength="3"
ng-maxlength="8" placeholder="Enter State Name" required />
<p style="color: red" ng-show="userForm.STI_Name.$invalid && !userForm.STI_Name.$pristine"
class="help-block">
State is required.</p>
<p style="color: red" ng-show="userForm.STI_Name.$error.minlength" class="help-block">
State Name is too short.</p>
<p style="color: red" ng-show="userForm.STI_Name.$error.maxlength" class="help-block">
State Name is too long.</p>
</div>
<div class="col-md-4" ng-class="{ 'has-error' : userForm.STI_Code.$invalid && !userForm.STI_Code.$pristine }">
<label for="STI_Code">
Code</label>
<input type="text" ng-model="STI_Code" name="STI_Code" class="form-control" required />
<p style="color: red" ng-show="userForm.STI_Code.$invalid && !userForm.STI_Code.$pristine"
class="help-block">
Code is required.</p>
</div>
</div>
<div>
</div>
<hr />
<div class="form-row">
<div class="col-md-4" tyle="margin-top:5px;" ng-class="{ 'has-error' : userForm.STI_Description.$invalid && !userForm.STI_Description.$pristine }">
<label for="STI_Description">
Description</label>
<input type="text" class="form-control" ng-model="STI_Description" placeholder="Enter Description Name"
name="STI_Description" required />
<p style="color: red" ng-show="userForm.STI_Description.$invalid && !userForm.STI_Description.$pristine"
class="help-block">
Description is required.</p>
</div>
<div class="col-md-4" ng-class="{ 'has-error' : userForm.STI_GstStateCode.$invalid && !userForm.STI_GstStateCode.$pristine }">
<label for="STI_GstStateCode">
GST Code</label>
<input type="text" class="form-control" ng-model="STI_GstStateCode" name="STI_GstStateCode"
placeholder="Enter GST Code" required />
<p style="color: red" ng-show="userForm.STI_GstStateCode.$invalid && !userForm.STI_GstStateCode.$pristine"
class="help-block">
GST Code is required.</p>
</div>
<div class="col-md-2">
<label for="validationCustom01">
Active
</label>
<br />
<input type="checkbox" ng-model="STI_Active" class="sm-form-control" />
</div>
</div>
<div>
</div>
<div class="form-group">
</div>
<div class="form-group" style="width: 120%; text-align: center; padding: 10px;">
<div class="col-md-offset-2 col-md-5">
<p>
<button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="AddUpdateEmployee()">
Submitt</button>
<button class="btn btn-danger btn-sm" ng-click="close()">
Close</button>
</p>
</div>
</div>
</div>
</form>
</div>
</div>
<button class="btn btn-success btn-sm " ng-click="AddStateDiv();" style="margin-left: 15px;">
Add
</button>
</div>
</div>
</body>
</html>
could you please check my code and help me ?
