Improve client-side validation for family add/edit form (#20)
This commit is contained in:
parent
94961c1c5e
commit
513733edc1
@ -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."
|
||||
}
|
||||
|
||||
@ -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) { ?>
|
||||
|
||||
@ -13,3 +13,32 @@ $("#add_child_row").click(function () {
|
||||
$("#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');
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user