pearson registration - refined error output and accommodation field display toggling
This commit is contained in:
Brian Talbot
@@ -97,6 +97,10 @@ $red: rgb(178, 6, 16);
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.error {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.list-input {
|
||||
@@ -115,14 +119,13 @@ $red: rgb(178, 6, 16);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
&.disabled, &.submitted {
|
||||
color: rgba(0,0,0,.25);
|
||||
|
||||
label {
|
||||
color: rgba(0,0,0,.25);
|
||||
cursor: text;
|
||||
|
||||
&:after {
|
||||
content: "(Disabled Currently)";
|
||||
margin-left: ($baseline/4);
|
||||
}
|
||||
}
|
||||
@@ -133,6 +136,28 @@ $red: rgb(178, 6, 16);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
label:after {
|
||||
color: rgba(0,0,0,.35);
|
||||
content: "(Disabled Currently)";
|
||||
}
|
||||
}
|
||||
|
||||
&.submitted {
|
||||
|
||||
label:after {
|
||||
content: "(Previously Submitted and Not Editable)";
|
||||
}
|
||||
|
||||
.value {
|
||||
@include border-radius(3px);
|
||||
border: 1px solid #C8C8C8;
|
||||
padding: $baseline ($baseline*0.75);
|
||||
background: #FAFAFA;
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
|
||||
label {
|
||||
@@ -228,6 +253,28 @@ $red: rgb(178, 6, 16);
|
||||
}
|
||||
}
|
||||
|
||||
// form - specifics
|
||||
.form-fields-secondary {
|
||||
display: none;
|
||||
|
||||
&.is-shown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.form-fields-secondary-visibility {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
|
||||
font-family: $sans-serif;
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// aside
|
||||
aside {
|
||||
@@ -382,10 +429,54 @@ $red: rgb(178, 6, 16);
|
||||
&.submission-error {
|
||||
border: 1px solid tint($red,85%);
|
||||
background: tint($red,95%);
|
||||
font-size: 14px;
|
||||
|
||||
#submission-error-heading {
|
||||
margin-bottom: ($baseline/2);
|
||||
border-bottom: 1px solid tint($red, 85%);
|
||||
padding-bottom: ($baseline/2);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.field-name, .field-error {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.field-name {
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
|
||||
.field-error {
|
||||
color: tint($red, 55%);
|
||||
}
|
||||
|
||||
p {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin-bottom: ($baseline/2);
|
||||
padding: 0;
|
||||
|
||||
span {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $red;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// submission success
|
||||
|
||||
@@ -14,6 +14,15 @@
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
|
||||
$(".form-fields-secondary-visibility").click(function(e){
|
||||
console.log("clicked");
|
||||
e.preventDefault();
|
||||
$(this).addClass("is-hidden");
|
||||
|
||||
$(".form-fields-secondary").addClass("is-shown");
|
||||
});
|
||||
|
||||
|
||||
$(document).on('ajax:success', '#testcenter_register_form', function(data, json, xhr) {
|
||||
if(json.success) {
|
||||
// when a form is successfully filled out, return back to the dashboard.
|
||||
@@ -30,19 +39,24 @@
|
||||
var num_errors = 0;
|
||||
var error_html = '';
|
||||
// first get rid of any errors that are already present:
|
||||
$(".field.error").removeClass('error');
|
||||
$(".field.error", ".form-actions").removeClass('error');
|
||||
$("#submission-error-list").html(error_html);
|
||||
// start to display new errors:
|
||||
$(".form-actions").addClass("error");
|
||||
$(".submission-error").addClass("is-shown");
|
||||
for (fieldname in field_errors) {
|
||||
// to inform a user of what field the error occurred on, add a class of .error to the .field element.
|
||||
// for convenience, use the "data-field" attribute to identify the one matching the errant field's name.
|
||||
$("[data-field='"+fieldname+"']").addClass('error')
|
||||
var field_id = "field-" + fieldname;
|
||||
var field_label = $("[id='"+field_id+"'] label").text();
|
||||
|
||||
$("[id='"+field_id+"']").addClass('error');
|
||||
|
||||
field_errorlist = field_errors[fieldname];
|
||||
for (i=0; i < field_errorlist.length; i+= 1) {
|
||||
field_error = field_errorlist[i];
|
||||
error_msg = fieldname + ": " + field_error;
|
||||
error_html = error_html + '<li class="to-be-determined">' + error_msg + '</li>';
|
||||
error_msg = '<span class="field-name">' + field_label + ':</span>' + '<span class="field-error">' + field_error + '</span>';
|
||||
error_html = error_html + '<li>' + '<a href="#field-' + fieldname + '">' + error_msg + '</a></li>';
|
||||
num_errors += 1;
|
||||
}
|
||||
}
|
||||
@@ -89,20 +103,6 @@
|
||||
|
||||
<section class="status">
|
||||
|
||||
<!-- NOTE: BT - registration data updated confirmation message - in case upon successful submit we're directing
|
||||
folks back to this view. To display, add "is-shown" class to div.
|
||||
NOTE: BW - not planning to do this, but instead returning user to student dashboard.
|
||||
<div class="message message-status submission-saved">
|
||||
<p class="message-copy">Your registration data has been updated and saved.</p>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- Markup for error message will be written here by ajax handler. To display, it adds "is-shown" class to div,
|
||||
and adds specific error messages under the list. -->
|
||||
<div class="message message-status submission-error">
|
||||
<p id="submission-error-heading" class="message-copy"></p>
|
||||
<ul id="submission-error-list"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
@@ -132,25 +132,25 @@
|
||||
<legend class="is-hidden">Personal Information</legend>
|
||||
|
||||
<ol class="list-input">
|
||||
<li data-field="salutation" class="field">
|
||||
<li data-field="salutation" class="field" id="field-salutation">
|
||||
<label for="salutation">Salutation</label>
|
||||
<input class="short" id="salutation" type="text" name="salutation" value="${testcenteruser.salutation}" placeholder="e.g. Mr., Ms., Mrs., Dr." />
|
||||
</li>
|
||||
<li data-field="first_name" class="field required">
|
||||
<label for="name-first">First Name </label>
|
||||
<input id="name-first" type="text" name="first_name" value="${testcenteruser.first_name}" placeholder="e.g. Albert" />
|
||||
<li data-field="first_name" class="field required" id="field-first_name">
|
||||
<label for="first_name">First Name </label>
|
||||
<input id="first_name" type="text" name="first_name" value="${testcenteruser.first_name}" placeholder="e.g. Albert" />
|
||||
</li>
|
||||
<li data-field="middle_name" class="field">
|
||||
<label for="name-middle">Middle Name</label>
|
||||
<input id="name-middle" type="text" name="middle_name" value="${testcenteruser.middle_name}" placeholder="" />
|
||||
<li data-field="middle_name" class="field" id="field-middle_name">
|
||||
<label for="middle_name">Middle Name</label>
|
||||
<input id="middle_name" type="text" name="middle_name" value="${testcenteruser.middle_name}" placeholder="" />
|
||||
</li>
|
||||
<li data-field="last_name" class="field required">
|
||||
<label for="name-last">Last Name</label>
|
||||
<input id="name-last" type="text" name="last_name" value="${testcenteruser.last_name}" placeholder="e.g. Einstein" />
|
||||
<li data-field="last_name" class="field required" id="field-last_name">
|
||||
<label for="last_name">Last Name</label>
|
||||
<input id="last_name" type="text" name="last_name" value="${testcenteruser.last_name}" placeholder="e.g. Einstein" />
|
||||
</li>
|
||||
<li data-field="suffix" class="field">
|
||||
<label for="name-suffix">Suffix</label>
|
||||
<input class="short" id="name-suffix" type="text" name="suffix" value="${testcenteruser.suffix}" placeholder="e.g. Jr., Sr. " />
|
||||
<li data-field="suffix" class="field" id="field-suffix">
|
||||
<label for="suffix">Suffix</label>
|
||||
<input class="short" id="suffix" type="text" name="suffix" value="${testcenteruser.suffix}" placeholder="e.g. Jr., Sr. " />
|
||||
</li>
|
||||
</ol>
|
||||
</fieldset>
|
||||
@@ -159,36 +159,36 @@
|
||||
<legend class="is-hidden">Mailing Address</legend>
|
||||
|
||||
<ol class="list-input">
|
||||
<li data-field="address_1" class="field required">
|
||||
<label class="long" for="address-1">Address Line #1</label>
|
||||
<input id="address-1" type="text" name="address_1" value="${testcenteruser.address_1}" placeholder="e.g. 112 Mercer Street" />
|
||||
<li data-field="address_1" class="field required" id="field-address_1">
|
||||
<label class="long" for="address_1">Address Line #1</label>
|
||||
<input id="address_1" type="text" name="address_1" value="${testcenteruser.address_1}" placeholder="e.g. 112 Mercer Street" />
|
||||
</li>
|
||||
<li class="field-group addresses">
|
||||
<div data-field="address_2" class="field">
|
||||
<label for="address-2">Address Line #2</label>
|
||||
<input id="address-2" class="long" type="text" name="address_2" value="${testcenteruser.address_2}" placeholder="e.g. Apartment 123" />
|
||||
<div data-field="address_2" class="field" id="field-address_2">
|
||||
<label for="address_2">Address Line #2</label>
|
||||
<input id="address_2" class="long" type="text" name="address_2" value="${testcenteruser.address_2}" placeholder="e.g. Apartment 123" />
|
||||
</div>
|
||||
<div data-field="address_3" class="field">
|
||||
<label for="address-3">Address Line #3</label>
|
||||
<input id="address-3" class="long" type="text" name="address_3" value="${testcenteruser.address_3}" placeholder="e.g. Attention: Albert Einstein" />
|
||||
<div data-field="address_3" class="field" id="field-address_3">
|
||||
<label for="address_3">Address Line #3</label>
|
||||
<input id="address_3" class="long" type="text" name="address_3" value="${testcenteruser.address_3}" placeholder="e.g. Attention: Albert Einstein" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="field-group postal">
|
||||
<div data-field="city" class="field required">
|
||||
<div data-field="city" class="field required" id="field-city">
|
||||
<label for="city">City</label>
|
||||
<input id="city" class="short" type="text" name="city" value="${testcenteruser.city}" placeholder="e.g. Newark" />
|
||||
</div>
|
||||
<div data-field="state" class="field">
|
||||
<div data-field="state" class="field" id="field-state">
|
||||
<label for="state">State/Province</label>
|
||||
<input id="state" class="short" type="text" name="state" value="${testcenteruser.state}" placeholder="e.g. NJ" />
|
||||
</div>
|
||||
<div data-field="postal_code" class="field">
|
||||
<label for="postal-code">Postal Code</label>
|
||||
<input id="postal-code" class="short" type="text" name="postal_code" value="${testcenteruser.postal_code}" placeholder="e.g. 08540" />
|
||||
<div data-field="postal_code" class="field" id="field-postal_code">
|
||||
<label for="postal_code">Postal Code</label>
|
||||
<input id="postal_code" class="short" type="text" name="postal_code" value="${testcenteruser.postal_code}" placeholder="e.g. 08540" />
|
||||
</div>
|
||||
<div data-field="country" class="field required">
|
||||
<label class="short" for="country-code">Country Code</label>
|
||||
<input id="country-code" class="short" type="text" name="country" value="${testcenteruser.country}" placeholder="e.g. USA" />
|
||||
<div data-field="country" class="field required" id="field-country">
|
||||
<label class="short" for="country">Country Code</label>
|
||||
<input id="country" class="short" type="text" name="country" value="${testcenteruser.country}" placeholder="e.g. USA" />
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
@@ -199,67 +199,66 @@
|
||||
|
||||
<ol class="list-input">
|
||||
<li class="field-group phoneinfo">
|
||||
<div data-field="phone" class="field required">
|
||||
<div data-field="phone" class="field required" id="field-phone">
|
||||
<label for="phone">Phone Number</label>
|
||||
<input id="phone" type="text" name="phone" value="${testcenteruser.phone}" placeholder="e.g. 1-55-555-5555" />
|
||||
</div>
|
||||
<div data-field="extension" class="field">
|
||||
<label for="phone-extension">Extension</label>
|
||||
<input id="phone-extension" class="short" type="text" name="extension" value="${testcenteruser.extension}" placeholder="e.g. 555" />
|
||||
<div data-field="extension" class="field" id="field-extension">
|
||||
<label for="extension">Extension</label>
|
||||
<input id="extension" class="short" type="text" name="extension" value="${testcenteruser.extension}" placeholder="e.g. 555" />
|
||||
</div>
|
||||
<div data-field="phone_country_code" class="field required">
|
||||
<label for="phone-countrycode">Phone Country Code</label>
|
||||
<input id="phone-countrycode" class="short" type="text" name="phone_country_code" value="${testcenteruser.phone_country_code}" placeholder="e.g. USA" />
|
||||
<div data-field="phone_country_code" class="field required" id="field-phone_country_code">
|
||||
<label for="phone_country_code">Phone Country Code</label>
|
||||
<input id="phone_country_code" class="short" type="text" name="phone_country_code" value="${testcenteruser.phone_country_code}" placeholder="e.g. USA" />
|
||||
</div>
|
||||
</li>
|
||||
<li class="field-group faxinfo">
|
||||
<div data-field="fax" class="field">
|
||||
<div data-field="fax" class="field" id="field-fax">
|
||||
<label for="fax">Fax Number</label>
|
||||
<input id="fax" type="text" class="short" name="fax" value="${testcenteruser.fax}" placeholder="e.g. 1-55-555-5555" />
|
||||
</div>
|
||||
<div data-field="fax_country_code" class="field">
|
||||
<label for="fax-countrycode">Fax Country Code</label>
|
||||
<input id="fax-countrycode" class="short" type="text" name="fax_country_code" value="${testcenteruser.fax_country_code}" placeholder="e.g. USA" />
|
||||
<div data-field="fax_country_code" class="field" id="field-fax_country_code">
|
||||
<label for="fax_country_code">Fax Country Code</label>
|
||||
<input id="fax_country_code" class="short" type="text" name="fax_country_code" value="${testcenteruser.fax_country_code}" placeholder="e.g. USA" />
|
||||
</div>
|
||||
</li>
|
||||
<li data-field="company_name" class="field">
|
||||
<label for="company">Company</label>
|
||||
<input id="company" type="text" name="company_name" value="${testcenteruser.company_name}" placeholder="e.g. American Association of University Professors" />
|
||||
<li data-field="company_name" class="field" id="field-company_name">
|
||||
<label for="company_name">Company</label>
|
||||
<input id="company_name" type="text" name="company_name" value="${testcenteruser.company_name}" placeholder="e.g. American Association of University Professors" />
|
||||
</li>
|
||||
</ol>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="form-fields-secondary">
|
||||
<!-- NOTE: BT - Assuming accommodations cannot be edited after a user originally submits registration, I've disabled the field and provided different text. Correct if this is not the case. -->
|
||||
% if registration:
|
||||
% if registration.accommodation_request and len(registration.accommodation_request) > 0:
|
||||
<div class="form-fields-secondary is-shown" id="form-fields-secondary">
|
||||
% endif
|
||||
% else:
|
||||
<div class="form-fields-secondary" id="form-fields-secondary">
|
||||
% endif
|
||||
|
||||
% if registration:
|
||||
<p class="instructions">Fields below this point are not part of the demographics, and are not editable currently.</p>
|
||||
<p class="instructions">Fields below this point are not part of your demographic information, and <strong>are not editable currently</strong>.</p>
|
||||
% else:
|
||||
<p class="instructions">Fields below this point are not part of the demographics, and cannot be changed once submitted.</p>
|
||||
<p class="instructions">Fields below this point are not part of your demographic information, <strong>and cannot be changed once submitted</strong>.</p>
|
||||
% endif
|
||||
|
||||
<fieldset class="group group-form group-form-optional">
|
||||
<legend class="is-hidden">Optional Information</legend>
|
||||
|
||||
<!-- Only display an accommodation request if one had been specified at registration time.
|
||||
So only prompt for an accommodation request if no registration exists.
|
||||
BW to BT: It is not enough to set the value of the disabled control. It does
|
||||
not display any text. Perhaps we can use a different markup instead of a control. -->
|
||||
<ol class="list-input">
|
||||
% if registration:
|
||||
% if registration.accommodation_request and len(registration.accommodation_request) > 0:
|
||||
<li class="field disabled">
|
||||
<label for="accommodations">Accommodations Requested</label>
|
||||
<!--
|
||||
<textarea class="long" id="accommodations" value="${registration.accommodation_request}" placeholder="" disabled="disabled"></textarea>
|
||||
-->
|
||||
<p id="accommodations">${registration.accommodation_request}</p>
|
||||
<li data-field="accommodation_request" class="field submitted" id="field-accommodation_request">
|
||||
<label for="accommodation_request">Accommodations Requested</label>
|
||||
<p class="value" id="accommodations">${registration.accommodation_request}</p>
|
||||
</li>
|
||||
% endif
|
||||
% else:
|
||||
<li data-field="accommodation_request" class="field">
|
||||
<label for="accommodations">Accommodations Requested</label>
|
||||
<textarea class="long" id="accommodations" name="accommodation_request" value="" placeholder=""></textarea>
|
||||
<li data-field="accommodation_request" class="field" id="field-accommodation_request">
|
||||
<label for="accommodation_request">Accommodations Requested</label>
|
||||
<textarea class="long" id="accommodation_request" name="accommodation_request" value="" placeholder=""></textarea>
|
||||
</li>
|
||||
% endif
|
||||
</ol>
|
||||
@@ -272,8 +271,21 @@
|
||||
% else:
|
||||
<button type="submit" id="submit" class="action action-primary action-register">Register for Pearson VUE Test</button>
|
||||
% endif
|
||||
</div>
|
||||
|
||||
<div class="message message-status submission-error">
|
||||
<p id="submission-error-heading" class="message-copy"></p>
|
||||
<ul id="submission-error-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
% if registration:
|
||||
% if registration.accommodation_request and len(registration.accommodation_request) > 0:
|
||||
<a class="actions form-fields-secondary-visibility is-hidden" href="#form-fields-secondary">Looking for Optional Accomodations?</a>
|
||||
% endif
|
||||
% else:
|
||||
<a class="actions form-fields-secondary-visibility" href="#form-fields-secondary">Looking for Optional Accomodations?</a>
|
||||
% endif
|
||||
</section>
|
||||
|
||||
<aside>
|
||||
|
||||
Reference in New Issue
Block a user