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

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

Browse Source
master
Skylar Ittner 6 years ago
parent fb50acddab
commit 62f3606020
2 changed files with 57 additions and 10 deletions
Show Stats Download Patch File Download Diff File

50
public/parts/signup.php
Unescape Escape View File

@ -93,28 +93,32 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"icon" => "fas fa-users", "icon" => "fas fa-users",
"name" => "familyname", "name" => "familyname",
"maxlength" => 100, "maxlength" => 100,
"value" => $familyname "value" => $familyname,
"error" => "Enter your last name."
], ],
[ [
"label" => "Father's Name", "label" => "Father's Name",
"icon" => "fas fa-male", "icon" => "fas fa-male",
"name" => "fathername", "name" => "fathername",
"maxlength" => 255, "maxlength" => 255,
"value" => $fathername "value" => $fathername,
"error" => "Enter the father's name."
], ],
[ [
"label" => "Mother's Name", "label" => "Mother's Name",
"icon" => "fas fa-female", "icon" => "fas fa-female",
"name" => "mothername", "name" => "mothername",
"maxlength" => 255, "maxlength" => 255,
"value" => $mothername "value" => $mothername,
"error" => "Enter the mother's name."
], ],
[ [
"label" => "Street Address", "label" => "Street Address",
"icon" => "fas fa-home", "icon" => "fas fa-home",
"name" => "streetaddress", "name" => "streetaddress",
"maxlength" => 500, "maxlength" => 500,
"value" => $streetaddress "value" => $streetaddress,
"error" => "Enter your address."
], ],
[ [
"label" => "City", "label" => "City",
@ -122,7 +126,8 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"name" => "city", "name" => "city",
"maxlength" => 255, "maxlength" => 255,
"width" => 3, "width" => 3,
"value" => $city "value" => $city,
"error" => "Enter your city."
], ],
[ [
"label" => "State", "label" => "State",
@ -130,6 +135,7 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"name" => "state", "name" => "state",
"type" => "select", "type" => "select",
"value" => $state, "value" => $state,
"error" => "Choose a state.",
"options" => [ "options" => [
'MT' => 'Montana', 'MT' => 'Montana',
'AL' => 'Alabama', 'AL' => 'Alabama',
@ -192,14 +198,19 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"name" => "zip", "name" => "zip",
"maxlength" => 10, "maxlength" => 10,
"width" => 3, "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", "label" => "Phone Number",
"icon" => "fas fa-phone", "icon" => "fas fa-phone",
"name" => "phone", "name" => "phone",
"type" => "tel",
"maxlength" => 20, "maxlength" => 20,
"value" => $phone "value" => $phone,
"pattern" => "[0-9]{10}",
"error" => "Enter a 10-digit phone number (numbers only)."
], ],
[ [
"label" => "Email", "label" => "Email",
@ -207,7 +218,8 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"name" => "email", "name" => "email",
"maxlength" => 255, "maxlength" => 255,
"type" => "email", "type" => "email",
"value" => $email "value" => $email,
"error" => "Enter your email address."
], ],
[ [
"label" => "Newsletter Preference", "label" => "Newsletter Preference",
@ -219,7 +231,8 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
"1" => "Email ($25)", "1" => "Email ($25)",
"2" => "Paper ($35)", "2" => "Paper ($35)",
"3" => "Email and 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']; ?>" aria-label="<?php echo $item['label']; ?>"
maxlength="<?php echo $item['maxlength']; ?>" maxlength="<?php echo $item['maxlength']; ?>"
<?php <?php
if (!empty($item['pattern'])) {
?>
pattern="<?php echo $item['pattern']; ?>"
<?php
}
?>
<?php
if (!empty($item['value'])) { if (!empty($item['value'])) {
?> ?>
value="<?php echo htmlspecialchars($item['value']); ?>" value="<?php echo htmlspecialchars($item['value']); ?>"
@ -265,6 +285,9 @@ if (isset($_SESSION['familyid']) && $database->has('families', ['familyid' => $_
<?php <?php
} }
?> ?>
<div class="invalid-feedback">
<?php echo $item['error']; ?>
</div>
</div> </div>
</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 /> <input type="hidden" name="stripeToken" id="stripe-token" required />
</div> </div>
<div class="card-footer"> <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>
</div> </div>
</form> </form>

17
public/static/signup.js
Unescape Escape 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) { $("#membershipform").on("submit", function (event) {
event.preventDefault(); 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) { stripe.createToken(card).then(function (result) {
if (result.error) { if (result.error) {
// Inform the customer that there was an error. // Inform the customer that there was an error.
$("#card-errors").removeClass("d-none"); $("#card-errors").removeClass("d-none");
$("#card-errors").text(event.error.message); $("#card-errors").text(event.error.message);
$("#savebutton").prop("disabled", false);
$("#savebutton-text").removeClass("d-none");
$("#savebutton-wait").addClass("d-none");
} else { } else {
$("#stripe-token").val(result.token.id); $("#stripe-token").val(result.token.id);
console.log(result.token); console.log(result.token);

Write Preview
Loading…
Cancel
Save