consumerportal
Version:
mydna Custimised for you
230 lines (193 loc) • 8.35 kB
HTML
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-69139205-6', 'auto');
ga('set', {
page: '/acctmgmt/register.html',
title: 'Register'
});
ga('send', 'pageview');
</script>
<div class="container">
<div class="row">
<div class="col-md-6 image-responsive-center center">
<div class='content_block content_blocks_padding'>
<h1>Register</h1>
<div class="alert alert-danger" ng-show="vm.showErrors && myForm.$invalid">
<p>Please correct the highlighted fields.</p>
</div>
<div class="alert alert-success" ng-show="vm.showErrors && myForm.$valid">
<p>All issues have been resolved.</p>
</div>
<form name="myForm" novalidate ng-submit="">
<p>Please confirm and complete the details below to create your myDNA account.
<strong>All fields are required.</strong>
</p>
<h3>Personal Details</h3>
<label>First Name</label><span style="padding-top: .5rem;display: block;">{{vm.frm.FirstName}}</span>
<input
tabindex="{{vm.tabindexValue}}"
type="hidden"
ng-model="vm.frm.FirstName" name="FirstName" id="FirstName"
ng-required="true" ng-minlength="2" ng-maxlength="200"
ng-class="{'error-branch' : vm.showErrors && myForm.FirstName.$invalid}"
/>
<div class="errorWrap" >
<div ng-messages="myForm.FirstName.$error" ng-show="vm.showErrors && myForm.FirstName.$invalid">
<div ng-message="required">Enter a First Name</div>
<div ng-message="minlength">First Name is too short</div>
<div ng-message="maxlength">First Name is too long</div>
</div>
</div>
<label>Last Name</label><span style="padding-top: .5rem;display: block;">{{vm.frm.LastName}}</span>
<input
tabindex="{{vm.tabindexValue}}"
type="hidden"
ng-model="vm.frm.LastName" name="LastName" id="LastName"
ng-required="true" ng-minlength="2" ng-maxlength="200"
ng-class="{'error-branch' : vm.showErrors && myForm.LastName.$invalid}"
/>
<div class="errorWrap" >
<div ng-messages="myForm.LastName.$error" ng-show="vm.showErrors && myForm.LastName.$invalid">
<div ng-message="required">Enter a Last Name</div>
<div ng-message="minlength">Last Name is too short</div>
<div ng-message="maxlength">Last Name is too long</div>
</div>
</div>
<label>Date of Birth</label>
<input
rsmdatedropdowns date-format="dd/MM/yyyy" ng-required="true" name="dob" id="dob" ng-model="vm.frm.dob"
day-div-class="day-container"
day-class="form-control day-selector"
month-div-class="month-container"
month-class="form-control month-selector"
year-div-class="year-container"
year-class="form-control year-selector"
ng-class="{'error-branch' : vm.showErrors && myForm.dob.$invalid}"
/>
<div class="errorWrap" >
<div ng-show="vm.showErrors && myForm.dob.$invalid">
Enter a valid date (dd/mm/yyyy)
</div>
</div>
<h3>Contact Details</h3>
<label>Address</label>
<input class="form-control"
tabindex="{{vm.tabindexValue}}"
type="text"
ng-model="vm.frm.Address" id="Address" name="Address"
ng-required="true" ng-minlength="5" ng-maxlength="200"
ng-class="{'error-branch' : vm.showErrors && myForm.Address.$invalid}"
/>
<div class="errorWrap">
<div ng-messages="myForm.Address.$error" ng-show="vm.showErrors && myForm.Address.$invalid">
<div ng-message="required">Enter an Address</div>
<div ng-message="minlength">Address is too short</div>
<div ng-message="maxlength">Address is too long</div>
</div>
</div>
<label>Suburb</label>
<input class="form-control"
tabindex="{{vm.tabindexValue}}"
type="text" class="short"
ng-model="vm.frm.Suburb" name="Suburb" id="Suburb"
ng-required="true" ng-minlength="2" ng-maxlength="200"
ng-class="{'error-branch' : vm.showErrors && myForm.Suburb.$invalid}"
/>
<div class="errorWrap" >
<div ng-messages="myForm.Suburb.$error" ng-show="vm.showErrors && myForm.Suburb.$invalid">
<div ng-message="required">Enter a Suburb</div>
<div ng-message="minlength">Suburb is too short</div>
<div ng-message="maxlength">Suburb is too long</div>
</div>
</div>
<label>State</label><div class="select-styling">
<select class="form-control"
tabindex="{{vm.tabindexValue}}"
ng-model="vm.frm.State" id="State" name="State"
ng-required="true" ng-minlength="2"
ng-class="{'error-branch' : vm.showErrors && myForm.State.$invalid}"
>
<option value=""></option>
<option value="ACT">ACT</option>
<option value="NSW">New South Wales</option>
<option value="NT">Northern Territory</option>
<option value="QLD">Queensland</option>
<option value="SA">South Australia</option>
<option value="TAS">Tasmania</option>
<option value="VIC">Victoria</option>
<option value="WA">Western Australia</option>
<option value="Outside Australia">Outside Australia</option>
</select></div>
<div class="errorWrap" >
<div ng-messages="myForm.State.$error" ng-show="vm.showErrors && myForm.State.$invalid">
<div ng-message="required">Choose a State</div>
<div ng-message="minlength">Choose a State</div>
</div>
</div>
<label>Post Code</label>
<input class="form-control"
tabindex="{{vm.tabindexValue}}"
type="text"
ng-model="vm.frm.PostCode" id="PostCode" name="PostCode"
ng-required="true" mydna-validator="postcode"
ng-class="{'error-branch' : vm.showErrors && myForm.PostCode.$invalid}"
/>
<div class="errorWrap" >
<div ng-messages="myForm.PostCode.$error" ng-show="vm.showErrors && myForm.PostCode.$invalid">
<div ng-message="required">Enter a Post Code</div>
<div ng-message="mydnaValidator">Post Code is invalid</div>
</div>
</div>
<!-- <div class="row">
<label>Country</label>
<div class="select-styling">
<select ng-model="vm.selectedCountry" id="Country" name="Country" ng-required="true"
ng-class="{'error-branch' : vm.showErrors == true && myForm.Country.$invalid}"
ng-options="country.Name for country in vm.Countries track by country.Id"
ng-change="vm.setCountry();" >
</select>
</div>
<div class="errorWrap">
<div ng-messages="myForm.Country.$error" ng-show="vm.showErrors == true">
<div ng-message="required"> Choose a Country</div>
</div>
</div>
</div> -->
<label>Phone/Mobile</label>
<input class="form-control"
tabindex="{{vm.tabindexValue}}"
type="text" placeholder="Optional"
ng-model="vm.frm.Mobile" id="Mobile" name="Mobile"
ui-mask="(99) 9999 9999" ui-mask-placeholder ui-mask-placeholder-char="_"
/>
<div class="spacer"></div>
<label>Email</label>
<input class="form-control"
tabindex="{{vm.tabindexValue}}"
type="text"
ng-model="vm.frm.Email" name="Email" id="Email"
ng-required="true" mydna-validator="email"
ng-class="{'error-branch' : vm.showErrors && myForm.Email.$invalid}"
/>
<div class="errorWrap" >
<div ng-messages="myForm.Email.$error" ng-show="vm.showErrors && myForm.Email.$invalid">
<div ng-message="required">Enter an Email</div>
<div ng-message="mydnaValidator">Email is invalid</div>
</div>
</div>
<div class="buttons-inner">
<button
tabindex="{{vm.tabindexValue}}"
ng-click="vm.saveDetails()"
class="btn btn-primary">
Next
</button>
</div>
</form>
</div>
</div>
</div>
</div>