Adding form validation to contact page

This commit is contained in:
Rob H
2014-08-24 18:46:14 +10:00
parent 454e4c971a
commit fc0afae51c
2 changed files with 14 additions and 14 deletions

View File

@@ -2,9 +2,7 @@
.header
%h2
Greetings
%span.brick{ ng: { show: "enterprise.is_distributor" } }
{{ enterprise.name }}
%span.turquoise{ ng: { show: "!enterprise.is_distributor" } }
%span{ ng: { class: "{brick: enterprise.is_distributor, turquoise: !enterprise.is_distributor}" } }
{{ enterprise.name }}
%h5 Now we need to know where you are
@@ -24,18 +22,18 @@
%input.chunky.small-12.columns{ id: 'enterprise_city', name: 'city', required: true, placeholder: "eg. Northcote", ng: { model: 'enterprise.address.city' } }
%span.error.small-12.columns{ ng: { show: "address.city.$error.required && submitted" } }
You need to enter a suburb.
.small-12.large-4.columns
.small-12.large-4.columns.field
%label{ for: 'enterprise_zipcode' } Postcode:
%input.chunky.small-12.columns{ id: 'enterprise_zipcode', name: 'zipcode', required: true, placeholder: "eg. 3070", ng: { model: 'enterprise.address.zipcode' } }
%span.error.small-12.columns{ ng: { show: "address.zipcode.$error.required && submitted" } }
You need to enter a postcode.
.row
.small-12.large-8.columns
.small-12.large-8.columns.field
%label{ for: 'enterprise_country' } Country:
%select.chunky.small-12.columns{ id: 'enterprise_country', name: 'country', required: true, ng: { model: 'enterprise.country', options: 'c as c.name for c in countries' } }
%span.error.small-12.columns{ ng: { show: "address.country.$error.required && submitted" } }
You need to enter a country.
.small-12.large-4.columns
.small-12.large-4.columns.field
%label{ for: 'enterprise_state' } State:
%select.chunky.small-12.columns{ id: 'enterprise_state', name: 'state', ng: { model: 'enterprise.address.state_id', options: 's.id as s.abbr for s in enterprise.country.states', show: 'countryHasStates()', required: 'countryHasStates()' } }
%span.error.small-12.columns{ ng: { show: "address.state.$error.required && submitted" } }

View File

@@ -3,26 +3,28 @@
%h2 Last step to create your enterprise!
%h5
Who is responsible for managing
%span.brick{"ng-show" => "enterprise.is_distributor"}
{{ enterprise.name }}
%span.turquoise{"ng-show" => "!enterprise.is_distributor" }
%span{ ng: { class: "{brick: enterprise.is_distributor, turquoise: !enterprise.is_distributor}" } }
{{ enterprise.name }}
%ng-include{ src: "'registration/steps.html'" }
%form
%form{ name: 'contact', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "create(contact)" } }
.row.content
.small-12.medium-12.large-7.columns
.row
.small-12.columns.field
%label{ for: 'enterprise_contact' } Primary Contact:
%input.chunky.small-12.columns{ id: 'enterprise_contact', placeholder: "Contact Name", ng: { model: 'enterprise.contact' } }
%input.chunky.small-12.columns{ id: 'enterprise_contact', name: 'contact', required: true, placeholder: "Contact Name", ng: { model: 'enterprise.contact' } }
%span.error.small-12.columns{ ng: { show: "contact.contact.$error.required && submitted" } }
You need to enter a primary contact.
.row
.small-12.columns.field
%label{ for: 'enterprise_email' } Email address:
%input.chunky.small-12.columns{ id: 'enterprise_email', placeholder: "eg. charlie@thefarm.com", ng: { model: 'enterprise.email' } }
%input.chunky.small-12.columns{ id: 'enterprise_email', name: 'email', type: 'email', required: true, placeholder: "eg. charlie@thefarm.com", ng: { model: 'enterprise.email' } }
%span.error.small-12.columns{ ng: { show: "(contact.email.$error.email || contact.email.$error.required) && submitted" } }
You need to enter valid email address.
.row
.small-12.columns.field
%label{ for: 'enterprise_phone' } Phone number:
%input.chunky.small-12.columns{ id: 'enterprise_phone', placeholder: "eg. (03) 1234 5678", ng: { model: 'enterprise.phone' } }
%input.chunky.small-12.columns{ id: 'enterprise_phone', name: 'phone', placeholder: "eg. (03) 1234 5678", ng: { model: 'enterprise.phone' } }
.small-12.medium-12.large-5.hide-for-small-only
/ %h6
/ Contact display
@@ -41,4 +43,4 @@
.small-12.columns
%input.button.secondary{ type: "button", value: "Back", ng: { click: "select('address')" } }
 
%input.button.primary{ type: "button", value: "Continue", ng: { click: "create()" } }
%input.button.primary{ type: "submit", value: "Continue" }