Skip to content
This repository has been archived by the owner on Apr 30, 2020. It is now read-only.

Commit

Permalink
Add validation with semantic UI (#14)
Browse files Browse the repository at this point in the history 
* Add validation with semantic UI

* Remove essay requirement
  • Loading branch information
@jsjqian
jsjqian authored Feb 7, 2018
1 parent ea59765 commit e86ae19
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 20 deletions.
32 changes: 18 additions & 14 deletions app/client/views/application/application.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,26 @@
<div class="divided title">Personal Details</div>
<div class="field">
<label>Email</label>
<input type="email" disabled="disabled" ng-model="user.email">
<input type="email" name="email" disabled="disabled" ng-model="user.email">
</div>
<div class="field">
<label>First Name</label>
<input type="text" ng-model="user.profile.firstName">
<input type="text" name="firstName" ng-model="user.profile.firstName">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" ng-model="user.profile.lastName">
<input type="text" name="lastName" ng-model="user.profile.lastName">
</div>
<div class="field">
<label>What's your phone number? (required)</label>
<p>We need this in case we need to get ahold of you!</p>
<input required type="tel" ng-model="user.profile.phoneNumber"
<input required type="tel" name="phoneNumber"
ng-model="user.profile.phoneNumber"
placeholder="(123) - 555 - 1234">
</div>
<div class="field">
<label>Gender</label>
<select ng-model="user.profile.gender">
<select name="gender" ng-model="user.profile.gender">
<option value="">Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
Expand All @@ -51,15 +52,15 @@
</strong>
</p>
<div class="ui checkbox">
<input type="checkbox" id="adult" ng-model="user.profile.adult">
<input type="checkbox" name="adult" id="adult" ng-model="user.profile.adult">
<label for="adult">I am 18 or older OR I am part of the officially-sanctioned bitcamp minor program.</label>
</div>
</div>

<div class="field">
<label>Shirt Size (required)</label>
<p>Let's get you some swag!</p>
<select required ng-model="user.profile.shirtSize">
<select required name="shirtSize" ng-model="user.profile.shirtSize">
<option value="">Shirt Size</option>
<option value="XS">X-Small</option>
<option value="S">Small</option>
Expand All @@ -74,19 +75,19 @@
<div class="divided title">Emergency Contact</div>
<div class="field">
<label>Name</label>
<input type="text" ng-model="user.profile.emergencyContact.name">
<input type="text" name="emName" ng-model="user.profile.emergencyContact.name">
</div>
<div class="field">
<label>Work Phone</label>
<input type="text" ng-model="user.profile.emergencyContact.workNumber">
<input type="text" name="emWorkPhone" ng-model="user.profile.emergencyContact.workNumber">
</div>
<div class="field">
<label>Cell Phone</label>
<input type="text" ng-model="user.profile.emergencyContact.cellNumber">
<input type="text" name="emCellPhone" ng-model="user.profile.emergencyContact.cellNumber">
</div>
<div class="field">
<label>Relationship</label>
<input type="text" ng-model="user.profile.emergencyContact.relationship">
<input type="text" name="relation" ng-model="user.profile.emergencyContact.relationship">
</div>

<!-- SCHOOL -->
Expand All @@ -96,6 +97,7 @@
<label> School </label>
<input class="ui input"
disabled="disabled"
name="school"
ng-show="autoFilledSchool"
ng-model="user.profile.school">
</div>
Expand Down Expand Up @@ -128,6 +130,7 @@
<div class="field">
<label>Major(s)</label>
<input type="text"
name="major"
placeholder="e.g, Computer Science, Finance"
ng-model="user.profile.major">
</div>
Expand Down Expand Up @@ -182,6 +185,7 @@
<div class="field">
<label>Why are you interested in attending Bitcamp?</label>
<input type="text" ng-model="user.profile.whyBitcamp"
name="whyBitcamp"
placeholder="Learning a new language, creating a hack to address a specific problem, etc." />
</div>
<div class="field">
Expand Down Expand Up @@ -223,7 +227,7 @@
<div class="field">
<label>Code of Conduct</label>
<div class="ui checkbox">
<input type="checkbox" ng-model="user.profile.mlhCOC">
<input type="checkbox" name="mlhCOC" ng-model="user.profile.mlhCOC">
<label>
I have read and agree to the terms of the Major League Hacking
<a target="_blank" href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">Code of Conduct</a>
Expand All @@ -233,7 +237,7 @@
<div class="field">
<label>Terms and Conditions</label>
<div class="ui checkbox">
<input type="checkbox" ng-model="user.profile.mlhTAC">
<input type="checkbox" name="mlhTAC" ng-model="user.profile.mlhTAC">
<label>
I have read and agree to the terms of both the
<a target="_blank" href="https://github.com/MLH/mlh-policies/blob/master/prize-terms-and-conditions/contest-terms.md">
Expand All @@ -251,7 +255,7 @@
<div class="field">
<label>Waiver</label>
<div class="ui checkbox">
<input type="checkbox" ng-model="user.profile.bitcampWaiver">
<input type="checkbox" name="bitcampWaiver" ng-model="user.profile.bitcampWaiver">
<label>
Please confirm that you agree to the terms of the Bitcamp Waiver.
</label>
Expand Down
75 changes: 69 additions & 6 deletions app/client/views/application/applicationCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,12 +140,21 @@ angular.module('reg')
// Semantic-UI form validation
$('.ui.form').form({
fields: {
name: {
identifier: 'name',
firstName: {
identifier: 'firstName',
rules: [
{
type: 'empty',
prompt: 'Please enter your name.'
prompt: 'Please enter your first name.'
}
]
},
lastName: {
identifier: 'lastName',
rules: [
{
type: 'empty',
prompt: 'Please enter your last name.'
}
]
},
Expand Down Expand Up @@ -181,10 +190,64 @@ angular.module('reg')
rules: [
{
type: 'allowMinors',
prompt: 'You must be an adult, or an MIT student.'
prompt: 'You must be an adult, or a UMD student.'
}
]
}
},
phoneNumber: {
identifier: 'phoneNumber',
rules: [
{
type: 'empty',
prompt: 'Please enter your phone number.'
}
]
},
shirtSize: {
identifier: 'shirtSize',
rules: [
{
type: 'empty',
prompt: 'Please enter your shirt size.'
}
]
},
major: {
identifier: 'major',
rules: [
{
type: 'empty',
prompt: 'Please enter your major.'
}
]
},
mlhCOC: {
identifier: 'mlhCOC',
rules: [
{
type: 'checked',
prompt: 'Please accpet the code of conduct.'
}
]
},
mlhTAC: {
identifier: 'mlhTAC',
rules: [
{
type: 'checked',
prompt: 'Please accpet the terms and conditions.'
}
]
},
bitcampWaiver: {
identifier: 'bitcampWavier',
rules: [
{
type: 'checked',
prompt: 'Please accpet the Bitcamp wavier.'
}
]
},
}
});
}
Expand All @@ -197,4 +260,4 @@ angular.module('reg')
}
};

}]);
}]);

0 comments on commit e86ae19

Please sign in to comment.