title: Proper error handling with Svelte from API (Rails)
body: <p>I'm developing a Svelte frontend app which communicates with rails API server.
  I like the rails way of abstraction (esp. with simple_form gem) and I'd like to bring some ideas to Svelte. The particular problem I met is how to associate errors from the rails server with inputs on the svelte side</p>
  
  <p>First, I tuned up error responses from the server; in general, they look like this:</p>
  
  <pre><code>{ errors: 
    { generic: [&lt;messages without association with particular field&gt;], 
      email: ["Already taken", &lt;msg_2&gt;, ...], 
      password: ["Too short", ...],
      field_N: [...]
    }
  }
  </code></pre>
  
  <p><em>generic</em> errors can be "Invalid Login Credentials", "Your account is locked", "Internal Server Error", etc. 
  Other errors must be related to the form fields and must be displayed next to them.</p>
  
  <p>Here is my current approach <strong>signup.svelte</strong>:</p>
  
  <pre><code>&lt;script&gt;
  let email;
  let password;
  function registerRequest() {
    let regURL = baseURL+'/api/users/';
    let data = {"user": {"email": email, "password": password}};
    fetch(regURL, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(function(response) {
      if (!response.ok) {
        return response.json()
      } 
    })
    // if errors present then iterate through errors object
    .then(function(error) {
      // find id of the message field and insert actual messages
      for (let [key, value] of Object.entries(error.errors)) {
   document.getElementById(key).insertAdjacentHTML('beforeend',value);
      }
    });
  }
  &lt;/script&gt;
  
  &lt;style&gt; .errormessage { color: red; } &lt;/style&gt;
  
  &lt;form class="col-sm-12 col-lg-6" on:submit|preventDefault={registerRequest}&gt;
    &lt;!-- here I need to create errormessage container for each field. --&gt;
    &lt;!-- first one is generic to display generic errors --&gt;
    &lt;div class="errormessage" id="generic"&gt;&lt;/div&gt;
  
    &lt;label for="UserEmail"&gt;Email address&lt;/label&gt;
    &lt;input type="email" class="form-control" id="UserEmail" aria-describedby="emailHelp" placeholder="Enter your email here..." bind:value={email}&gt;
    &lt;div class="errormessage" id="email"&gt;&lt;/div&gt;
  
    &lt;label for="UserPassword"&gt;Password&lt;/label&gt;
    &lt;input type="password" class="form-control" id="UserPassword" placeholder="...and your password here" bind:value={password}&gt;
    &lt;div class="errormessage" id="password"&gt;&lt;/div&gt;
  
    &lt;button type="submit" class="btn btn-primary"&gt;Register&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I want to unify the code above with frontend validation. If the <code>errors</code> object is presented - show messages next to the fields with errors. It seems to me that using <code>getElementById</code> is overkill. Why should I use it if my DOM never reloading? Every time on <code>input</code> it will search for ids. Maybe it should be listener that listens changes of the errors object? I tried to bind the custom <code>event</code> with Svelte
  <code>import { createEventDispatcher } from 'svelte';</code>, but with no luck.</p>
  
  <p>Please help and share your thoughts.</p>