From 720ad4ce2d43ab55ec8da6ad70b503af012b90a4 Mon Sep 17 00:00:00 2001 From: Ben Ramey Date: Tue, 13 May 2014 10:59:35 -0500 Subject: [PATCH] Validation for create-run form --- assets/linker/styles/forms.less | 26 ++---- assets/linker/templates/run/create.jade | 106 ++++++++++++++++-------- 2 files changed, 82 insertions(+), 50 deletions(-) diff --git a/assets/linker/styles/forms.less b/assets/linker/styles/forms.less index b9589b7..3d9b4e6 100644 --- a/assets/linker/styles/forms.less +++ b/assets/linker/styles/forms.less @@ -11,31 +11,20 @@ form { } input.form-control { - font-size: 2em; - height: auto; margin: 0 0 10px 0; } + .has-feedback .form-control-feedback { + font-size: 2em; + top: 9px; + right: 5px; + } + .btn-primary { font-size: 4em; } } .create-run-form { - .invitee { - input, .btn { - width: auto; - float: left; - } - input { - margin-right: 10px; - } - .btn { - font-size: 2em; - } - } - .btn-default { - font-size: 2em; - } } .create-order-form { textarea { @@ -45,3 +34,6 @@ form { font-size: 2em; } } +input.ng-dirty.ng-invalid { +} + diff --git a/assets/linker/templates/run/create.jade b/assets/linker/templates/run/create.jade index 7f1694e..14b285a 100644 --- a/assets/linker/templates/run/create.jade +++ b/assets/linker/templates/run/create.jade @@ -7,41 +7,81 @@ block pagetitle block interiorcontent .create-run-form(ng-controller='CreateRunCtrl') form(name='form',novalidate,role='form') - section.name - .row - .col-xs-2.step-num - span.glyphicon.glyphicon-info-sign - .col-xs-10 - input#name.form-control(type='text',ng-model='run.name',required,placeholder='Name your run') - section - .row - .col-xs-2.step-num - span.glyphicon.glyphicon-user - .col-xs-10 - input#creatorName.form-control(type='text',ng-model='run.creatorName',required,placeholder='Your name') - input#creatorEmail.form-control(type='email',ng-model='run.creatorEmail',required,placeholder='Your email') - section - .row - .col-xs-2.step-num - span.glyphicon.glyphicon-map-marker - .col-xs-10 - input#restaurant.form-control(type='text',ng-model='run.restaurant',placeholder='Restaurant') - input#menuUrl.form-control(type='url',ng-model='run.menuUrl',placeholder='Menu URL') + section.name.row + .col-xs-2.step-num + span.glyphicon.glyphicon-info-sign + .col-xs-10 + .form-group(ng-class="{'has-error has-feedback': form.Name.$dirty && form.Name.$invalid, 'has-success has-feedback': form.Name.$dirty && form.Name.$valid}") + input#name.form-control.input-lg(type='text',ng-model='run.name',required,placeholder='Name your run',name='Name') + div(ng-show='form.Name.$dirty && form.Name.$invalid') + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='form.Name.$error.required') What should we call you lunch run? + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show="form.Name.$dirty && form.Name.$valid") + + section.row + .col-xs-2.step-num + span.glyphicon.glyphicon-user + .col-xs-10 + .form-group(ng-class="{'has-error has-feedback': form.CreatorName.$dirty && form.CreatorName.$invalid, 'has-success has-feedback': form.CreatorName.$dirty && form.CreatorName.$valid}") + input#creatorName.form-control.input-lg(type='text',ng-model='run.creatorName',required,placeholder='Your name',name='CreatorName') + div(ng-show="form.CreatorName.$dirty && form.CreatorName.$invalid") + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='form.CreatorName.$error.required') What's your name? + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.CreatorName.$dirty && form.CreatorName.$valid') - section.invitees - .row - .col-xs-2.step-num - span.glyphicon.glyphicon-list - .col-xs-10 - .invitee.clearfix(ng-repeat='i in run.invitees') - input.form-control(ng-model='i.name',required,placeholder='Name') - input.form-control(ng-model='i.email',required,placeholder='Email') - button.btn.btn-warning(ng-click='removeInvitee($index)') - span.glyphicon.glyphicon-remove + .form-group(ng-class="{'has-error has-feedback': form.Email.$dirty && form.Email.$invalid, 'has-success has-feedback': form.Email.$dirty && form.Email.$valid}") + input#creatorEmail.form-control.input-lg(type='email',ng-model='run.creatorEmail',required,placeholder='Your email',name='Email') + div(ng-show='form.Email.$dirty && form.Email.$invalid') + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='form.Email.$error.required') What's your email address? + span(ng-show='form.Email.$error.email') That doesn't look like a valid email address. + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Email.$dirty && form.Email.$valid') - button.btn.btn-default(ng-click='addInvitee()') - span.glyphicon.glyphicon-plus - | Invite another! + section.row + .col-xs-2.step-num + span.glyphicon.glyphicon-map-marker + .col-xs-10 + .form-group(ng-class="{'has-error has-feedback': form.Restaurant.$dirty && form.Restaurant.$invalid, 'has-success has-feedback': form.Restaurant.$dirty && form.Restaurant.$valid}") + input#restaurant.form-control.input-lg(type='text',ng-model='run.restaurant',placeholder='Restaurant',name='Restaurant',required) + div(ng-show="form.Restaurant.$dirty && form.Restaurant.$invalid") + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='form.Restaurant.$error.required') Where are you going to eat? + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='form.Restaurant.$dirty && form.Restaurant.$valid') + + .form-group + input#menuUrl.form-control.input-lg(type='url',ng-model='run.menuUrl',placeholder='Menu URL') + + section.invitees.row + .col-xs-2.step-num + span.glyphicon.glyphicon-list + .col-xs-10 + .invitee.clearfix(ng-repeat='i in run.invitees') + ng-form(name='inviteeForm') + .row + .col-xs-12.col-sm-5 + .form-group(ng-class="{'has-error has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$invalid, 'has-success has-feedback': inviteeForm.Name.$dirty && inviteeForm.Name.$valid}") + input.form-control.input-lg(ng-model='i.name',required,placeholder='Name',name="Name") + div(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$invalid') + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='inviteeForm.Name.$error.required') Give this person a name + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Name.$dirty && inviteeForm.Name.$valid') + + .col-xs-12.col-sm-5 + .form-group(ng-class="{'has-error has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$invalid, 'has-success has-feedback': inviteeForm.Email.$dirty && inviteeForm.Email.$valid}") + input.form-control.input-lg(type='email',ng-model='i.email',required,placeholder='Email',name="Email") + div(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$invalid') + span.glyphicon.glyphicon-remove.form-control-feedback + span(ng-show='inviteeForm.Email.$error.required') What's this person's email address? + span(ng-show='inviteeForm.Email.$error.email') That doesn't look like a valid email address. + span.glyphicon.glyphicon-ok.form-control-feedback(ng-show='inviteeForm.Email.$dirty && inviteeForm.Email.$valid') + + .col-xs-12.col-sm-2 + button.btn.btn-block.btn-lg.btn-warning(ng-click='removeInvitee($index)') + span.glyphicon.glyphicon-remove + + button.btn.btn-default.btn-lg(ng-click='addInvitee()') + span.glyphicon.glyphicon-plus + | Invite another! section.submit button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run)",ng-disabled="form.$invalid")