Validation for create-run form
This commit is contained in:
Ben Ramey
@@ -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 {
|
||||
}
|
||||
|
||||
|
||||
@@ -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.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
|
||||
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')
|
||||
|
||||
button.btn.btn-default(ng-click='addInvitee()')
|
||||
span.glyphicon.glyphicon-plus
|
||||
| Invite another!
|
||||
.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')
|
||||
|
||||
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")
|
||||
|
||||
Reference in New Issue
Block a user