I am simply trying to get a validation message to appear on a form either when it is submitted or when the user tabs to another field.
I have the following code in place (with a "novalidate" attribute on the masterpage form tag), but cannot get it to work.
Does anybody have any ideas how this simple validation should be able to work with Angular?
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Enter Check Slip Number" id="txtCDDepositSlipNumber" name="txtCDDepositSlipNumber" ng-model="formCtrl.depositSlip.selectedSlipID" required />
</div>
<div role="alert">
<span class="error" ng-show="form1.txtCDDepositSlipNumber.$error.required">Required!</span>
</div>
EDIT
Entire code base where the plunker doesn't work. If somebody can notice something that is causing it not to work, I would very much appreciate it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ryder-warranty">
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="description" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>
</title><link href="../Content/lib/assets/css/datepicker.css" rel="stylesheet" /><link href="../Content/lib/assets/css/datepicker.css" rel="stylesheet" /><link rel="Stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /><link href="../Content/lib/assets/css/ui.jqgrid.css" rel="stylesheet" /><link rel="../content/lib/assets/css/ace-skins.min.css" /><link rel="../content/lib/assets/css/ace-rtl.min.css" /><link href="../Content/lib/assets/css/js-css-menu.css" rel="stylesheet" /><link href="../Content/sweet-alert/sweetalert.css" rel="stylesheet" />
<script src="/Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<script src="/Scripts/knockout-3.1.0.debug.js"></script>
<script src="/Scripts/modernizr-2.6.2.min.js"></script>
<script src="/Scripts/ryder/scripts.js"></script>
<script src="/Scripts/ryder/hidden-navs.js"></script>
<script src="/Scripts/grid.locale-en.min.js"></script>
<script src="/Content/lib/assets/js/jquery.jqGrid.min.js"></script>
<script src="/Scripts/json2.min.js"></script>
<script src="/Content/lib/assets/js/bootstrap-datepicker.min.js"></script>
<script src="/Content/lib/assets/js/bootbox3/bootbox.min.js"></script>
<script src="/Scripts/Common.js"></script>
<script src='/Scripts/DataServices/AnnualGoal.js'></script>
<script src='/Scripts/DataServices/MonthlyGoal.js'></script>
<script src='/Scripts/DataServices/CheckEntry.js'></script>
<script src='/Scripts/DataServices/CreditSourceDocs.js'></script>
<script src='/Scripts/DataServices/StopPenalize.js'></script>
<script src='/Scripts/DataServices/PISIQueue.js'></script>
<script src='/Scripts/DataServices/BalanceReview.js'></script>
<script src='/Scripts/DataServices/StopPenalizePI.js'></script>
<script src='/Scripts/DataServices/StopPenalizeAI.js'></script>
<script src='/Scripts/DataServices/WorkQueueSummary.js'></script>
<script src='/Scripts/DataServices/AppealTransmissionLog.js'></script>
<script src='/Scripts/DataServices/OtherDeptsTransfer.js'></script>
<script src='/Scripts/DataServices/LocationsTransfer.js'></script>
<script src='/Scripts/DataServices/ImportRebuildClaims.js'></script>
<script src='/Scripts/DataServices/JournalVoucher.js'></script>
<script src='/Scripts/DataServices/CreditMemo.js'></script>
<script src='/Scripts/DataServices/DupUnIdentResponses.js'></script>
<script src='/Scripts/DataServices/CreditQueue.js'></script>
<script src='/Scripts/DataServices/ReversePenalize.js'></script>
<script src='/Scripts/DataServices/CheckDeposit.js'></script>
<script src='/Scripts/DataServices/Escalation.js'></script>
<script src='/Scripts/AccountingModule/Common.js'></script>
<style type="text/css">
.auto-style3 {
left: 0px;
top: 7px;
}
</style>
<link href="../Content/bootswatch.css" rel="stylesheet" /><link href="../Content/jasny-bootstrap/jasny-bootstrap.css" rel="stylesheet" /><link href="../Content/angular-ui/ui-grid.css" rel="stylesheet" /><link href="../Content/assets/css/jquery-ui.structure.css" rel="stylesheet" /><link href="../Content/assets/css/bootstrap-duallistbox.min.css" rel="stylesheet" /><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" /><link href="../Content/ryder_web.css" rel="stylesheet" />
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/jasney-bootstrap/jasny-bootstrap.js"></script>
<script src="/Scripts/monent-js/monent.js"></script>
<script src="/Scripts/sweet-alert/sweetalert.min.js"></script>
<script src="/Scripts/jquery.bootstrap-duallistbox.min.js"></script>
<script src="/Scripts/angular/angular-1.4.5.js"></script>
<script src="/Scripts/angular/angular-animate.js"></script>
<script src='/Scripts/showErrors.js'></script>
<script src="/Scripts/angular-ui/ui-grid.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap-0.13.1.js"></script>
<script src="/Scripts/angular-controllers/ryder-module.js"></script>
<script src="https://cdn.rawgit.com/mike-marcacci/objectpath/v1.1.0/lib/ObjectPath.js"></script>
<script src="https://cdn.rawgit.com/geraintluff/tv4/v1.1.9/tv4.min.js"></script>
<script src="https://cdn.rawgit.com/Textalk/angular-schema-form/0.8.0/dist/schema-form.js"></script>
<script src="https://cdn.rawgit.com/Textalk/angular-schema-form/0.8.0/dist/bootstrap-decorator.js"></script>
<script>
var root = '/';
//console.log("root: " + root);
</script>
</head>
<body style="background-color: #cfc9c9">
<form method="post" action="CheckDepositProcess.aspx" id="form1" novalidate="">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="vcFExEZBEsQiDCkCSBU+2n/tQOoFbgoHH52LZBSuwmbbQPBteWfSaTizqamROXGuQI9IyxJq5XH+2fN5mauU+WINo9+rqaB9DX6l2nufy34=" />
</div>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle nav-left" data-toggle="offcanvas" data-target="#navbar" data-canvas="body" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="../Images/ryder/ryder-logo.png" alt="icon" class="alignnone size-full wp-image-156" /></a>
</div>
<div id="navbar" class="navbar-offcanvas offcanvas navmenu-fixed-left">
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Accounting<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href='CreditMemo.aspx'>Credit Memo</a></li>
<li><a href='UnidentifiedClaimResponse.aspx'>UnIdentified. Responses</a></li>
<li><a href='CheckEntry.aspx'>Check Entry</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href='javascript: void(0)'>CSD Spreadsheet Import</a>
<ul class="dropdown-menu">
<li><a href='ImportCreditSourceDocs.aspx'>Credit Memo Import</a></li>
<li><a href='#'>Check Import</a></li>
</ul>
</li>
<li><a href='CheckDepositProcess.aspx'>Check Deposit</a></li>
<li><a href='ReversePenalize.aspx'>Reverse Penalize</a></li>
<li><a href='AccountBalancingProcess.aspx'>Account Balancing</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href='javascript: void(0)'>Journal Voucher</a>
<ul class="dropdown-menu">
<li><a href='JournalVoucher.aspx'>Journal Voucher List</a></li>
<li><a href='LocationsTransfer.aspx'>Locations Transfer</a></li>
<li><a href='OtherDeptsTransfer.aspx'>Other Dept Transfer</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Queue Management<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href='ManagementCreditQueue.aspx'>Management Credit Queue</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Administration<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href='ManufacturerSetup.aspx'>Manufacturer Setup</a></li>
<li><a href='EscalationParameterSetup.aspx'>Escalation Parameter Setup</a></li>
<li><a href='PenalizationParameter.aspx'>Penalization Parameter Setup</a></li>
<li><a href='VarianceReason.aspx'>Variance Reason</a></li>
<li><a href='CrossRefToMFRVarianceReason.aspx'>Crossref to MFR Variance Reason</a></li>
<li><a href='CurrencyConversion.aspx'>Currency Conversion</a></li>
<li><a href='WarrantyLocations.aspx'>Warranty Locations</a></li>
<li><a href='WarrantyGLAccounts.aspx'>Warranty General Ledger Accounts</a></li>
<li><a href='CorporateGLCrossReference.aspx'>Corporate GL Cross Reference</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href='javascript: void(0)'>User</a>
<ul class="dropdown-menu">
<li><a href='../Administration/Users.aspx'>Users
</a></li>
<li><a href='../Administration/Roles.aspx'>Roles
</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Maintain Goal<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href='GoalTypes.aspx'>Goal Types</a></li>
<li><a href='CalendarSetup.aspx'>Calendar Setup</a></li>
<li><a href='AnnualGoal.aspx'>Annual Goal</a></li>
<li><a href='MonthlyGoal.aspx'>Monthly Goal</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Supporting Items<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href='RyderRepairs.aspx'>Ryder Repairs</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href='#'>Claims</a>
<ul class="dropdown-menu">
<li><a href='RepairsClaim.aspx'>Repair Claims</a></li>
<li><a href='DealerClaim.aspx'>Dealer Claims</a></li>
<li><a href='SupplierClaim.aspx'>Supplier Claims</a></li>
<li><a href='ClaimStatusVIew.aspx'>Claim Status View</a></li>
</ul>
</li>
<li><a href="ImportRebuildClaims.aspx">Import Rebuild Claims</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href='#'>Warranty Tracking</a>
<ul class="dropdown-menu">
<li><a href='Escalation.aspx'>Shipping</a></li>
<li><a href='Escalation.aspx'>Additional info</a></li>
<li><a href='Escalation.aspx'>Picture</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<div class="content-body">
<ol class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">Home</a>
</li>
<li><a href="#">Accounting</a></li>
<li class="active">Check Deposit</li>
</ol>
<div ng-controller="CheckDepositProcessFormController as formCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Check Deposit</h3>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-4">
<label class="control-label align-left">Check Slip Number:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Enter Check Slip Number" id="txtCDDepositSlipNumber" name="txtCDDepositSlipNumber" ng-model="formCtrl.depositSlip.selectedSlipID" required />
</div>
<div role="alert">
<span class="error" ng-show="form1.txtCDDepositSlipNumber.$error.required">Required!</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<label class="control-label align-left">Country Code:</label>
</div>
<div class="col-sm-8">
<select class="form-control"
id="ddlCDWarLocation" required
ng-init="formCtrl.getWarrantyLocation('/OptionList/GetWarrantyLocationDataAsync')"
ng-model="formCtrl.depositSlip.selectedWarrantyLocation"
ng-options="item.Value as item.Text for item in formCtrl.listWarrantyLocation">
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<label class="control-label align-left">Posted Date:</label>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-2">
<label class="control-label align-left">From</label>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="dteCDDateSubmittedFromGL" ng-model="formCtrl.depositSlip.selectedDatePostedFromGL" ng-init="formCtrl.datePickerConfig.jqueryDatePicker('#dteCDDateSubmittedFromGL')" />
</div>
<div class="col-sm-2">
<label class="control-label align-left">To</label>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="dteCDDatePostedToGL" ng-model="formCtrl.depositSlip.selectedDatePostedToGL" ng-init="formCtrl.datePickerConfig.jqueryDatePicker('#dteCDDatePostedToGL')" />
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-4">
<label class="control-label align-left">Deposit Slip Status:</label>
</div>
<div class="col-sm-8">
<select class="form-control"
id="ddlCDSlipStatus" required
ng-init="formCtrl.getDepositSlipStatus('/OptionList/GetDepositSlipStatusDataAsync')"
ng-model="formCtrl.depositSlip.selectedDepositSlipStatus"
ng-options="item.Value as item.Text for item in formCtrl.listDepositSlipStatus">
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<label class="control-label align-left">JVNumber:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Enter JV Number" id="txtJournalVoucherID" ng-model="formCtrl.depositSlip.selectedJournalVoucherID" required />
</div>
</div>
<div class="form-group">
<div class="col-sm-4">
<label class="control-label align-left">Deposit Slip Amount:</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Enter Deposit Slip Amount" id="txtDepositSlipAmount" ng-model="formCtrl.depositSlip.selectedSlipAmount" required />
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-controller="CheckDepositProcessGridController as gridCtrl">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" id="btnNew" ng-click="formCtrl.newCheckDeposit()">New</button>
</div>
<div class="btn-group" role="group">
<button type="Reset" class="btn btn-default" ng-click="formCtrl.setReset()" id="btnCDClear">Clear</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" id="btnCDSearch" ng-click="gridCtrl.getGridData('/CheckDepositProcess/GetCheckDepositProcessDataAsync', formCtrl.depositSlip)">Search</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="panel panel-default">
<div class="panel-body">
<div class="grid" ui-grid="gridCtrl.gridOptions" ui-grid-pagination></div>
</div>
</div>
<div ng-controller="AlertCtrl">
<div ng-repeat="alert in alerts" ng-show="alert.show">
<alert type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
<button class='btn' ng-click="addAlert()">Deposit Slip Saved</button>
</div>
</div>
</div>
<script src="../Scripts/angular-controllers/check-deposit.js"></script>
</div>
</form>
</body>
</html>
EDIT # 2 - Input box -------- ---------
<div class="col-sm-8">
<input type="text" required class="form-control" placeholder="Enter Total Amount" id="txtTotalAmount" name="txtTotalAmount" ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
</div>
<p class="help-block" ng-if="userForm.txtTotalAmount.$error.required">Required</p>
mASTERPAGE:
<form id="userForm" name="userForm" novalidate>
