Skip to content
This repository has been archived by the owner on Feb 8, 2018. It is now read-only.

Commit

Permalink
let the browser take care of required fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@Changaco
Changaco committed Mar 17, 2015
1 parent 0227177 commit 6616ab3
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 30 deletions.
23 changes: 0 additions & 23 deletions js/gratipay/payments.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,29 +90,6 @@ Gratipay.payments.ba.submit = function (e) {
var errors = [];


// Require some fields.
// ====================

var requiredFields = {
account_name: 'The name on your bank account is required.',
account_number: 'Your bank account number is required.',
routing_number: 'A routing number is required.'
};
for (var field in requiredFields) {
var $f = $('#' + field);
if (!$f.length) // Only validate if it's on the page.
continue;
var value = $f.val();

if (!value) {
$f.closest('div').addClass('error');
errors.push(requiredFields[field]);
} else {
$f.closest('div').removeClass('error');
}
}


// Validate routing number.
// ========================

Expand Down
6 changes: 3 additions & 3 deletions www/bank-account.html.spt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,17 +80,17 @@ title = _("Bank Account")

<label>
<span>{{ _("Name on Bank Account") }}</span>
<input id="account_name" autofocus />
<input id="account_name" required autofocus />

This comment has been minimized.

Sign in to view

Copy link
@chadwhitacre

chadwhitacre Mar 17, 2015

Contributor

This makes for a worse user experience, because the browser tooltips are different than the tooltips we implement ourselves in ... where do we implement that?

Furthermore, the browser implementation appears to only highlight one missing field at a time. It's better for users if we display all errors on the form at once, as we were doing before.

This comment has been minimized.

Sign in to view

Copy link
@Changaco

Changaco Mar 17, 2015

Author Contributor

the browser tooltips are different than the tooltips we implement ourselves in ... where do we implement that?

Our red tooltips are in e18bb31.

We could implement required ourselves and use our tooltips, but is it really so important to have all the tooltips look exactly the same?
</label>

<label>
<span>{{ _("Routing Number") }}</span>
<input id="routing_number" />
<input id="routing_number" required />
</label>

<label>
<span>{{ _("Bank Account Number") }}</span>
<input id="account_number" />
<input id="account_number" required />
</label>

<button class="selected larger" id="save" type="submit">{{ _("Save") }}</button>
Expand Down
8 changes: 4 additions & 4 deletions www/credit-card.html.spt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,19 +84,19 @@ title = _("Credit Card")

<label>
<span>{{ _("Credit Card Number") }}</span>
<input id="card_number" />
<input id="card_number" required />
</label>

<div class="half">
<label for="expiration_month">{{ _("Expiration") }}</label>
<input id="expiration_month" placeholder="{{ _('MM') }}" title="{{ _('Expiration Month') }}" />
<input id="expiration_month" placeholder="{{ _('MM') }}" title="{{ _('Expiration Month') }}" required />
<span class="date_slash">/</span>
<input id="expiration_year" placeholder="{{ _('YY') }}" title="{{ _('Expiration Year') }}" />
<input id="expiration_year" placeholder="{{ _('YY') }}" title="{{ _('Expiration Year') }}" required />
</div>

<label class="half right">
<span>{{ _("CVV") }}</span>
<input id="cvv" />
<input id="cvv" required />
</label>

<div class="info">
Expand Down

0 comments on commit 6616ab3

Please sign in to comment.