Netsyms/HACHEMembershipPortal
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve client-side validation for signup/renewal form (close #20)

Browse Source
This commit is contained in:
Skylar Ittner 2018-12-20 19:09:29 -07:00
parent fb50acddab
commit 62f3606020
2 changed files with 57 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
public/parts/signup.php
View File

@ -93,28 +93,32 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"icon" => "fas fa-users",
"name" => "familyname",
"maxlength" => 100,
"value" => $familyname
"value" => $familyname,
"error" => "Enter your last name."
],
[
"label" => "Father's Name",
"icon" => "fas fa-male",
"name" => "fathername",
"maxlength" => 255,
"value" => $fathername
"value" => $fathername,
"error" => "Enter the father's name."
],
[
"label" => "Mother's Name",
"icon" => "fas fa-female",
"name" => "mothername",
"maxlength" => 255,
"value" => $mothername
"value" => $mothername,
"error" => "Enter the mother's name."
],
[
"label" => "Street Address",
"icon" => "fas fa-home",
"name" => "streetaddress",
"maxlength" => 500,
"value" => $streetaddress
"value" => $streetaddress,
"error" => "Enter your address."
],
[
"label" => "City",
@ -122,7 +126,8 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"name" => "city",
"maxlength" => 255,
"width" => 3,
"value" => $city
"value" => $city,
"error" => "Enter your city."
],
[
"label" => "State",
@ -130,6 +135,7 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"name" => "state",
"type" => "select",
"value" => $state,
"error" => "Choose a state.",
"options" => [
'MT' => 'Montana',
'AL' => 'Alabama',
@ -192,14 +198,19 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"name" => "zip",
"maxlength" => 10,
"width" => 3,
"value" => $zip
"value" => $zip,
"pattern" => "[0-9]{5}(-?[0-9]{4})?",
"error" => "Enter a valid 5 or 9 digit ZIP code."
],
[
"label" => "Phone Number",
"icon" => "fas fa-phone",
"name" => "phone",
"type" => "tel",
"maxlength" => 20,
"value" => $phone
"value" => $phone,
"pattern" => "[0-9]{10}",
"error" => "Enter a 10-digit phone number (numbers only)."
],
[
"label" => "Email",
@ -207,7 +218,8 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"name" => "email",
"maxlength" => 255,
"type" => "email",
"value" => $email
"value" => $email,
"error" => "Enter your email address."
],
[
"label" => "Newsletter Preference",
@ -219,7 +231,8 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"1" => "Email ($25)",
"2" => "Paper ($35)",
"3" => "Email and Paper ($35)"
]
],
"error" => "Choose a newsletter option."
]
];
@ -241,6 +254,13 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
aria-label="<?php echo $item['label']; ?>"
maxlength="<?php echo $item['maxlength']; ?>"
<?php
if (!empty($item['pattern'])) {
?>
pattern="<?php echo $item['pattern']; ?>"
<?php
}
?>
<?php
if (!empty($item['value'])) {
?>
value="<?php echo htmlspecialchars($item['value']); ?>"
@ -265,6 +285,9 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
<?php
}
?>
<div class="invalid-feedback">
<?php echo $item['error']; ?>
</div>
</div>
</div>
</div>
@ -455,7 +478,14 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
<input type="hidden" name="stripeToken" id="stripe-token" required />
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary"><i class="fas fa-arrow-right"></i> Submit<span class="d-none d-sm-inline"> Application and Payment</span></button>
<button type="submit" class="btn btn-primary" id="savebutton">
<span id="savebutton-text">
<i class="fas fa-arrow-right"></i> Submit<span class="d-none d-sm-inline"> Application and Payment</span>
</span>
<span id="savebutton-wait" class="d-none">
<i class="fas fa-spinner fa-spin"></i> Working...
</span>
</button>
</div>
</div>
</form>

17
public/static/signup.js
View File

@ -33,14 +33,31 @@ card.addEventListener('change', function (event) {
}
});
$("#savebutton").click(function (event) {
var form = $("#membershipform");
if (form[0].checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.addClass('was-validated');
});
$("#membershipform").on("submit", function (event) {
event.preventDefault();
// prevent multiple clicks since Stripe can take a few seconds
$("#savebutton").prop("disabled", true);
$("#savebutton-text").addClass("d-none");
$("#savebutton-wait").removeClass("d-none");
stripe.createToken(card).then(function (result) {
if (result.error) {
// Inform the customer that there was an error.
$("#card-errors").removeClass("d-none");
$("#card-errors").text(event.error.message);
$("#savebutton").prop("disabled", false);
$("#savebutton-text").removeClass("d-none");
$("#savebutton-wait").addClass("d-none");
} else {
$("#stripe-token").val(result.token.id);
console.log(result.token);