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

Improve client-side validation for family add/edit form (#20)

Browse Source
master
Skylar Ittner 5 years ago
parent 94961c1c5e
commit 513733edc1
3 changed files with 68 additions and 13 deletions
Show Stats Download Patch File Download Diff File

3
langs/en/messages.json
Unescape Escape View File

@ -11,5 +11,6 @@
"You agree to use the information in this directory for homeschool use ONLY. All other purposes, such as soliciting, is strictly prohibited.": "You agree to use the information in this directory for homeschool use ONLY. All other purposes, such as soliciting, is strictly prohibited.",
"Payment saved.": "Payment saved.",
"Only showing expired or expiring memberships.": "Only showing expired or expiring memberships.",
"This family wishes to remain private. Do not share this information, even with other HACHE members.": "This family wishes to remain private. Do not share this information, even with other HACHE members."
"This family wishes to remain private. Do not share this information, even with other HACHE members.": "This family wishes to remain private. Do not share this information, even with other HACHE members.",
"That email address is already in use with another family.": "That email address is already in use with another family."
}

49
pages/editfamily.php
Unescape Escape View File

@ -15,6 +15,7 @@ if (!$user->hasPermission("HACHEPORTAL_EDIT")) {
$editing = false;
if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']])) {
$family = new Family();
$family->setExpires(strtotime("+1 year"));
} else {
$famid = $VARS['id'];
$family = (new Family())->load($famid);
@ -22,7 +23,7 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
}
?>
<form action="action.php" method="post">
<form action="action.php" method="post" id="editform">
<div class="card">
@ -57,28 +58,32 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
"icon" => "fas fa-users",
"name" => "familyname",
"maxlength" => 100,
"value" => $family->getName()
"value" => $family->getName(),
"error" => "Enter a last name."
],
[
"label" => "Father's Name",
"icon" => "fas fa-male",
"name" => "fathername",
"maxlength" => 255,
"value" => $family->getFather()
"value" => $family->getFather(),
"error" => "Enter the father's name."
],
[
"label" => "Mother's Name",
"icon" => "fas fa-female",
"name" => "mothername",
"maxlength" => 255,
"value" => $family->getMother()
"value" => $family->getMother(),
"error" => "Enter the mother's name."
],
[
"label" => "Street Address",
"icon" => "fas fa-home",
"name" => "streetaddress",
"maxlength" => 500,
"value" => $family->getAddress()
"value" => $family->getAddress(),
"error" => "Enter an address."
],
[
"label" => "City",
@ -86,7 +91,8 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
"name" => "city",
"maxlength" => 255,
"width" => 3,
"value" => $family->getCity()
"value" => $family->getCity(),
"error" => "Enter a city."
],
[
"label" => "State",
@ -94,6 +100,7 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
"name" => "state",
"type" => "select",
"value" => $family->getState(),
"error" => "Select a state.",
"options" => [
'MT' => 'Montana',
'AL' => 'Alabama',
@ -156,15 +163,20 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
"name" => "zip",
"maxlength" => 10,
"width" => 3,
"value" => $family->getZip()
"value" => $family->getZip(),
"error" => "Enter a valid 5 or 9 digit ZIP code.",
"pattern" => "[0-9]{5}(-?[0-9]{4})?"
],
[
"label" => "Phone Number",
"icon" => "fas fa-phone",
"name" => "phone",
"width" => 3,
"maxlength" => 20,
"value" => $family->getPhone()
"maxlength" => 10,
"type" => "tel",
"pattern" => "[0-9]{10}",
"value" => $family->getPhone(),
"error" => "Enter a valid ten-digit phone number."
],
[
"label" => "Email",
@ -172,7 +184,8 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
"name" => "email",
"maxlength" => 255,
"type" => "email",
"value" => $family->getEmail()
"value" => $family->getEmail(),
"error" => "Enter an email address."
],
[
"label" => "Newsletter Preference",
@ -180,6 +193,7 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
"name" => "newsletter_method",
"type" => "select",
"value" => $family->getNewsletter(),
"error" => "Choose an option.",
"options" => [
"1" => "Email ($25)",
"2" => "Paper ($35)",
@ -192,7 +206,8 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
"name" => "date",
"type" => "date",
"width" => 3,
"value" => date("Y-m-d", $family->getExpires())
"value" => date("Y-m-d", $family->getExpires()),
"error" => "Choose a valid date."
]
];
@ -214,6 +229,13 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
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']); ?>"
@ -238,6 +260,9 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
<?php
}
?>
<div class="invalid-feedback">
<?php echo $item['error']; ?>
</div>
</div>
</div>
</div>
@ -329,7 +354,7 @@ if (empty($VARS['id']) || !$database->has('families', ['familyid' => $VARS['id']
<input type="hidden" name="action" value="editfamily" />
<div class="card-footer d-flex">
<button type="submit" class="btn btn-success mr-1">
<button type="submit" class="btn btn-success mr-1" id="savebutton">
<i class="fas fa-save"></i> <?php $Strings->get("Save"); ?>
</button>
<?php if ($editing) { ?>

29
static/js/editfamily.js
Unescape Escape View File

@ -12,4 +12,33 @@ $("#add_child_row").click(function () {
$.get("lib/template_child_entry.php", {}, function (resp) {
$("#child_list").append(resp);
});
});
$("#editform").on("submit", function () {
// Do some client-side validation that isn't handled by the browser
var phone = $("input[name=phone]").val();
var zip = $("input[name=zip]").val();
var ok = true;
if (/^[0-9]{10}$/.test(phone) == false) {
ok = false;
$("input[name=phone]").addClass()
}
if (/^[0-9]{5}(-?[0-9]{4})?$/.test(zip) == false) {
ok = false;
}
return ok;
});
$("#savebutton").click(function (event) {
var form = $("#editform");
if (form[0].checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
form.addClass('was-validated');
});
Write Preview
Loading…
Cancel
Save