angularjs form validation on button submit click

I need help with form validation using angularjs. I have input fields that when a submit button is clicked it validates the form. If the form has invalid inputs it states what is wrong in a message. If no issues then the button is submitted to the next page. If there is no activity after 5 minuets then any data entered on the form is cleared or the form is reset.
The inputs are:
US Zipcode: can't be empty. numbers only and no more and no less then 5 numbers long.
Income:  can't be empty and must be number only.
Two buttons (Yes / No): one of the two buttons need to be selected.
 First name: can't be left empty
Last name: can't be left empty
Birthday: Can't be left empty in date form (mm/dd/yyyy)
3 dropdowns:  can't be left empty
     Gender: Male / Female
     Relationship: Spouse / dpmestic partner
     Tobaco user (Yes/No)

Below is my code:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BeneFITwise | Let's Get Started</title>
<link rel="icon" href="images/favicons/be-favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/dependencies.css">
<link rel="stylesheet" href="styles/wrapkit.css">
<link rel="stylesheet" href="styles/mbe-custom.css">
<style>



</style>
</head>
<body>
<main class="wrapkit-wrapper" id="wrapper">
<!-- White header section -->
<nav class="header navbar mbe-header">
<div class="container-fluid">
	<div class="pull-left">
		<a class="navbar-brand" href="welcome-page.html"><img class="logo img-responsive" src="images/logo/gadgets-header-logo.png" alt="Logo" title="Return Home"></a>
		<button type="button" data-sidebar="toggleVisible" class="btn btn-icon navbar-btn hidden-md hidden-lg" title="Menu"><i class="fa fa-bars"></i></button>
	</div>
	<div class="pull-right">
		<div class="dropdown">
			<a aria-label="More" class="btn btn-icon navbar-btn dropdown-toggle mbe-header-icon-text-container" data-toggle="dropdown" href="#" title="Language"><i class="mbe-header-icon-text hidden-xs">Language</i><i class="fa fa-globe"></i></a>
			<ul class="dropdown-menu dropdown-menu-right">
				<li><a href="#" title="English">English</a></li>
				<li><a href="#" title="Spanish">Spanish</a></li>
			</ul>
		</div>
		<div class="dropdown">
			<a aria-label="More" class="btn btn-icon navbar-btn dropdown-toggle mbe-header-icon-text-container" data-toggle="dropdown" href="#" title="Contact Us"><i class="mbe-header-icon-text hidden-xs">Contact Us</i><i class="fa fa-headphones"></i></a>
			<ul class="dropdown-menu dropdown-menu-right">
				<li><a href="#" title="Live Chat"><span class="pull-right"><i class="fa fa-wechat text-muted"></i></span>Live Chat</a></li>
				<li><a href="#" title="Email Us"><span class="pull-right"><i class="fa fa-envelope-o text-muted"></i></span>Email Us</a></li>
				<li class="no-link"><span class="pull-right"><i class="fa fa-phone text-muted"></i></span>Call Us - <br>
				 (877) 837-5017 <br>
				 Hours: 7:30am - 6:00pm CST </li>
			</ul>
		</div>
		<div class="dropdown">
			<a class="btn btn-icon navbar-btn dropdown-toggle mbe-header-icon-text-container" href="#" title="Logout"><i class="mbe-header-icon-text hidden-xs">Logout</i><i class="fa fa-sign-out"></i></a>
		</div>
	</div>
</div>
</nav>
<section class="content">
<div class="content container-fluid">
	<div class="mbe-2000px-max-width">
		<!-- Breadcrumb section -->
		<ol class="breadcrumb mbe-breadcrumb">
			<li><a href="welcome-page.html" title="Return Home"><i class="fa fa-home"></i></a></li>
			<li class="active">Medical</li>
		</ol>
		<!-- End of breadcrumb section -->
		<!-- Start of Progress Bar section -->
		
		<!-- End of Progress Bar section -->
		<div class="content-body">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="panel panel-default mbe-panel">
						<div class="panel-heading">
							<h2 class="panel-title">Medical | Step 1: Let's Get Started</h2>
						</div>
						<div class="panel-body decision-supp-container">
							<!-- <div class="decision-supp-label-section">
								<div class="image">
									<img src="images/mbe-custom/benefitwise-icon-small.png" alt="BeneFITwise logo">
								</div>
								<div class="text">
									<span class="word">BeneFITwise</span>
								</div>
							</div> -->
							<div class="row">
								<div class="col-lg-12">
									<div class="alert alert-danger alert-dismissible fade in mbe-alert" role="alert">
										<i class="fa fa-exclamation-triangle mr-1x"></i>Please select survey answer to continue.
									</div>
								</div>
							</div>	
							<div class="row">
								<div class="col-lg-12">
									<div class="alert alert-danger alert-dismissible fade in mbe-alert" role="alert">
										<i class="fa fa-exclamation-triangle mr-1x"></i>Please complete/correct all required fields below.
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-lg-10 col-lg-offset-1">
									<div class="row">
										<div class="col-lg-10 col-lg-offset-1">
											<div class="text-center">
												<p class="font-22-31">
													<b>BeneFITwise</b>
												</p>
												<p class="font-19-28">
													<b><a href="#" data-toggle="modal" data-target="#moreInfoModal" title="View additional info"><i class="fa fa-info-circle mr-1x"></i>View More Info</a>
													</b>
												</p>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg-10 col-lg-offset-1 mb-1">
											<div class="row">
												<div class="col-lg-6">
													<form class="mbe-form">
														<div class="form-group">
															<label class="mbe-label">My zip code is:<sup class="asterisk-red ml-1x">*</sup></label>
															<input class="form-control mbe-input" value="00000">
														</div>
														<div class="form-group">
															<label class="mbe-label">My annual household income is:<sup class="asterisk-red ml-1x">*</sup></label>
															<div class="input-with-unit">
																<input class="form-control mbe-input" value="0.00">
																<span class="unit">$</span>
															</div>
															<div class="help-text">
																 (before taxes)
															</div>
														</div>
													</form>
												</div>
												<div class="col-lg-6 divider" align="center">
													<div class="icon-container">
														<i class="fa fa-child icon" aria-hidden="true"></i>
													</div>
													<h6>Are you or a covered family member planning to have a child in the next year?</h6>
													<div class="decision-support-question-container">
														<div class="question-button-container two-buttons">
															<button class="question-button" type="button">Yes</button>
															<button class="question-button chosen" type="button">No</button>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-lg-12">
											<div class="text-center">
												<h4>
												Enter the people that you want to be included in the estimate.  You must enter yourself.  Remember, this does not cover them for benefits.</h4>
											</div>
										</div>
									</div>
								</div>
							</div>
							<form class="mbe-form">
								<div class="scrollable-shadow-table col-md-10 col-md-offset-1">
									<div class="table-responsive mbe-table">
										<table class="table table-striped picwell-started">
										<tr>
											<th>
												 Name
											</th>
											<th>
												Relationship
											</th>
											<th>
												 Age
											</th>
											<th>
												 Birth Date
											</th>
											<th>
												 Gender
											</th>
											<th>
												 Tobacco User?
											</th>
											<th>
											</th>
										</tr>
										<tr>
											<td>
												 <a data-toggle="modal" data-target="#editNameModal" title="Edit Name">Myself</a>
											</td>
											<td>
												Self
											</td>
											<td>
												 48
											</td>
											<td>
												 01/03/1970
											</td>
											<td>
												 Male
											</td>
											<td>
												No
											</td>
											<td>
												<a href="#">Remove</a>
											</td>
										</tr>
										<tr>
											<td>
												 <a data-toggle="modal" data-target="#editNameModal" title="Edit Name">Smith, Sarah</a>
											</td>
											<td>
												Spouse / Domestic Partner
											</td>
											<td>
												45
											</td>
											<td>
												 06/03/1972
											</td>
											<td>
												 Female
											</td>
											<td>
												Yes 
											</td>
											<td>
												<a href="#">Remove</a>
											</td>
										</tr>
										<tr>
											<td>
												 <a data-toggle="modal" data-target="#editNameModal" title="Edit Name">Smith, Timmy</a>
											</td>
											<td>
												Child
											</td>
											<td>
												 17
											</td>
											<td>
												 04/23/2000
											</td>
											<td>
												 Male
											</td>
											<td>
												No
											</td>
											<td>
												<a href="#">Remove</a>
											</td>
										</tr>
										</table>
									</div>
									<div class="row">
										<div class="col-lg-12">
											<button type="button" class="btn-mbe btn-teal" data-toggle="modal" data-target="#addNameModal" title="Add Name">Add Name</button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="enrollment-navigation-section">
	<div class="mbe-2000px-max-width">
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-10 col-xs-offset-1">
					<div class="enrollment-navigation-right">
						<a href="picwell-base-medications.html" class="btn-mbe btn-teal" title="Continue">Continue<i class="fa fa-angle-right ml-1x"></i></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</section>
<!-- End of main content section -->
<!-- Modal section -->
<div class="modal fade mbe-modal" id="moreInfoModal" tabindex="-1" role="dialog" aria-labelledby="moreInfoModal">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h2 id="moreInfoModal">More Information</h2>
			</div>
			<div class="modal-body">
				<p class="font-19-28">
					 BeneFITwise uses data on people like you to forecast your health care needs. The below items are critical components needed to achieve an accurate and personalized BeneFITwise score:
				</p>
				<ul class="font-19-28">
					<li><b>Zip Code / Location:</b> Dictates the cost, frequency, and delivery of health services.</li>
					<li><b>Household Income:</b> Helps us quantify how much someone like you can afford to pay for health care.</li>
					<li><b>Age:</b> Drives predictability around the types of services needed.</li>
					<li><b>Gender:</b> Drives the need for certain procedures for men and others for women.</li>
				</ul>
				<p class="font-19-28">
					<b>Please remember:</b> The more information you provide, the more accurate your BeneFITwise score will be!
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn-mbe btn-gray mt-4x" data-dismiss="modal" title="Close">Close</button>
			</div>
		</div>
	</div>
</div>
<!-- End of modal section -->
<!-- Modal section -->
<div class="modal fade mbe-modal in" id="addNameModal" tabindex="-1" role="dialog" aria-labelledby="addNameModal">
	<div class="modal-dialog modal-md" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h2 id="addName">Add Name</h2>
			</div>
			<div class="modal-body container-fluid">
				<form class="mbe-form">
					<div class="row">
						<div class="col-lg-12">
							<div class="alert alert-danger alert-dismissible fade in mbe-alert" role="alert">
								<i class="fa fa-exclamation-triangle mr-1x"></i>Please complete/correct all required fields below.
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<label class="mbe-label">First Name:<span class="asterisk-red">*</span></label>
								<input class="form-control mbe-input ng-touched ng-pristine ng-valid" id="firstName" type="text">
							</div>
							<div class="form-group">
								<label class="mbe-label">Last Name:<span class="asterisk-red">*</span></label>
								<input class="form-control mbe-input ng-touched ng-pristine ng-valid" id="lastName" type="text">
							</div>
							<div class="form-group">
								<label class="mbe-label">Date of Birth:<span class="asterisk-red">*</span></label>
								<input class="form-control mbe-input ng-touched ng-pristine" id="birthDate" placeholder="mm/dd/yyyy" type="text">
								<span class="text-danger">A birth date cannot be in the future.</span>
								<span class="text-danger">This person is over 120 years old, please correct the date of birth.</span>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="mbe-label">Gender:<span class="asterisk-red">*</span></label>
								<select class="form-control mbe-select ng-touched ng-pristine ng-valid" id="gender">
									<option disabled="" selected="" value="Select">Select</option>
									<option value="F">Female</option>
									<option value="M">Male</option>
								</select>
							</div>
							<div class="form-group">
								<label class="mbe-label">Relationship:<span class="asterisk-red">*</span></label>
								<select class="form-control mbe-select ng-touched ng-pristine" id="relationship">
									<option disabled="" selected="" value="0">Select</option>
									<option value="2"> Self </option>
									<option value="4"> Spouse / Domestic Partner </option>
									<option value="8"> Child </option>
								</select>
							</div>
							<div class="form-group">
								<label class="mbe-label">Tobacco User:<span class="asterisk-red">*</span></label>
								<select class="form-control mbe-select">
									<option disabled="" selected="" value="0">Select</option>
									<option value="true">Yes</option>
									<option value="false">No</option>
								</select>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn-mbe btn-teal mt-4x mr-3x" data-dismiss="modal" type="button" title="Save and Close">Save and Close</button>
				<button class="btn-mbe btn-gray mt-4x" data-dismiss="modal" type="button">Close</button>
			</div>
		</div>
	</div>
</div>
<!-- End of modal section -->
<!-- Footer section -->
<footer class="mbe-footer">
<div class="footer">
	<ul>
		<li><a href="#" title="Copyright">Copyright</a></li>
		<li class="divider"></li>
		<li><a href="#" title="Disclaimer">Disclaimer</a></li>
		<li class="divider"></li>
		<li><a href="#" title="Privacy">Privacy</a></li>
		<li class="divider"></li>
		<li><a href="#" title="Terms">Terms</a></li>
	</ul>
</div>
</footer>
<!-- End of footer section -->
</main>
<!-- /#MAIN -->
<script src="scripts/html5-dataset.js"></script>
<!-- VENDORS : jQuery & Bootstrap -->
<script src="scripts/vendor.js"></script>
<!-- END VENDORS -->
<!-- DEPENDENCIES : Required plugins -->
<script src="scripts/dependencies.js"></script>
<!-- END DEPENDENCIES -->
<!-- WRAPKIT -->
<script src="scripts/wrapkit.js"></script>
<!-- END WRAPKIT -->
<!-- WRAPKIT SETUPS -->
<script src="scripts/wrapkit-setup.js"></script>
<!-- end WRAPKIT SETUPS -->
<!-- PLUGIN SETUPS: vendors & dependencies setups -->
<script src="scripts/plugin-setups.js"></script>
<!-- END PLUGIN SETUPS -->
</body>
</html>

Open in new window


Please help. I have been googling for solutions and nothing has worked. Thank you
newjeep19Asked:
Who is Participating?
All Courses

From novice to tech pro — start learning today.