Ready to get started?

Join Adocasts Plus for $8.00/mo or sign into your account to get access to all of our lessons.

robot mascot smiling

Form Validation & Displaying Errors

In this lesson, we'll add validation to our POST handler for our register route. We'll then update our form fields to check for and display any validation errors that may have occurred.

Published
Sep 06
Duration
6m 47s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Chapters

00:00 - Adding & Defining Our Register Validator
02:04 - Inspecting How Validation Errors Are Provided
03:30 - Access & Displaying Validation Errors

Ready to get started?

Join Adocasts Plus for $8.00/mo or sign into your account to get access to all of our lessons.

Join The Discussion! (4 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Commented 4 days ago

    Hey, my app doesn't provide validation errors right away. On the response tab it says "No content avaliable because this request was redirected."

    And there is no attr section on vue dev tools. I checked and it looks like we have exactly same code. Is it something about different versioning or something?

    Great course btw! Thanks.

    1

    Please sign in or sign up for free to reply

    1. Commented 3 days ago

      Hey hsn! When you're redirecting, is the response type a 303? Inertia expects redirect statuses to be 303 to work properly, and the AdonisJS adapter should automatically take care of this for you. So, if that isn't happening then something is likely misconfigured in your project.

      As for the attr section, if all items being passed into a page component are registered as props within the page, then there won't be attrs to display as everything will be under props. attrs in Vue captures non-registered prop data. For example:

      <template>
        <Header :user="user" :theme="blue" />
      </template>
      
      -----
      
      <script setup lang="ts">
      // Header.vue
      defineProps<{
        theme: string
      }>()
      <script>
      
      <template>
        <span>Hello</span>
      </template>
      Copied!

      In the above theme is a registered prop, so it'll be under props, but not attrs. Meanwhile, user is not a registered prop, but is being passed into the header. Therefore, it won't be within props, but rather attrs.

      That is the only thing coming to mind as to why the attrs may differ.

      Hope this helps!!

      0

      Please sign in or sign up for free to reply

      1. Commented 2 days ago

        Hey Tom, thanks for fast reply. Actually i think i checked if we have anything different so far and it looks like we have same conf. But my response type is 302 found.

        And thanks for the attrs explanation, i meant i tried a few things like removing defineProps to see if errors are making it to frontend as attrs but they were not. Then i removed all my attempts again, and got the errors on the frontend(idk why they were not tere and now idk how i fixed it (: ) even tho now i am getting validation errors, status code is still 302.

        I will check on the repo to see what is the reason it's coming as 302.

        Thanks.

        1

        Please sign in or sign up for free to reply

        1. Commented 1 day ago

          AdonisJS' automatic 302 to 303 conversion happens via the Inertia Middleware that comes with the package. You'll want to make sure it is configured as server middleware inside the start/kernel.ts file.

          I reckon the 302 issue might be related to your errors not originally populating. If you're able to and need further help digging into it, feel free to share the repo and I can take a look.

          0

          Please sign in or sign up for free to reply