Display errors in pretty format
This is a considerable improvement over dumping them in an alert()!
This commit is contained in:
parent
192ba69ae3
commit
9f2c248e41
1 changed files with 23 additions and 4 deletions
|
@ -8,12 +8,13 @@
|
|||
export let bio: string;
|
||||
|
||||
let slugIsAuto = true;
|
||||
let errors = [];
|
||||
|
||||
function generateAuthor(e) {
|
||||
e.preventDefault()
|
||||
|
||||
// Check the formatting
|
||||
let errors = []
|
||||
errors = []
|
||||
|
||||
// First, make sure the required fields are filled
|
||||
for (let [k,v] of [
|
||||
|
@ -34,9 +35,7 @@
|
|||
|
||||
// Validate slug formatting
|
||||
|
||||
if (errors.length) {
|
||||
alert(`There are some errors: ${errors}`)
|
||||
} else {
|
||||
if (!errors.length) {
|
||||
alert(`Name: ${name} email, ${email} has slug ${slug} and bio ${bio}`)
|
||||
}
|
||||
}
|
||||
|
@ -87,6 +86,17 @@
|
|||
<p>Enter your new author details below. Once done, click on the "Generate" button to receive a special file that you can import to Ghost to add the author details to the "staff". This will let you select them as the author when publishing a post.</p>
|
||||
|
||||
<form>
|
||||
{#if errors.length}
|
||||
<fieldset class="errors">
|
||||
<legend>Errors</legend>
|
||||
|
||||
<ul>
|
||||
{#each errors as error}
|
||||
<li>{error}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</fieldset>
|
||||
{/if}
|
||||
<fieldset>
|
||||
|
||||
<legend>{name || 'Author'}</legend>
|
||||
|
@ -129,6 +139,15 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.errors {
|
||||
color: red;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
fieldset.errors ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
main {
|
||||
max-width: 480px;
|
||||
|
|
Loading…
Reference in a new issue