question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Feature Request] store custom error message in FormControl Class

See original GitHub issue

Hi, thanks for this library to make form validation easier in svelte 👍 It is possible to integrate custom error messages in the FormControl Class?

I would imagine it like this. You can define custom error messages for each validator like this:

const form = useForm({
   email: { validators: [email, required], errors: { email: "This is not a valid email address", required: "This field is required" } }
});

the FormControl Class looks like this:

"email": {
  "errors": {
   "required": "This field is required",
   "email": "This is not a valid email address"
  },
  "valid": false,
  "touched": false,
  "validators": [
   null,
   null
  ],
  "initial": "",
  "_value": ""
 },

I might be easier to define error messages in one place and can access them, via the FormControl Object

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:14 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
noahsalvicommented, Mar 15, 2021

Actually niklas@grewe is a valid email according to the specs. https://stackoverflow.com/questions/20573488/why-does-html5-form-validation-allow-emails-without-a-dot

If you want one that also requires a dot in the email you could create one like this

function email(value) {
  const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gm;
  if (!emailRegex.test(value)) return { email: "Email not valid"};
}
0reactions
niklasgrewecommented, Mar 15, 2021

@noahsalvi As you mentioned, i grap the first error like this in my input.svelte component

{#if touched && errors}
   <p class="mt-2 text-sm text-yellow-600" id="email-error">{Object.values(errors)[0]}</p>
{/if}

Everhing works as i expected, but when i enter niklas@grewe i get undefined, instead of This is not a valid email address I had the same problem before in one of your REPL. I suspect that the error is due to the email validator, as it considers niklas@grewe to be a valid email address, which of course is not correct. Could you check this?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to set a custom error message to a form in angular
Reactive Form in Angular allows you to have custom errors and custom validations. Below is an example: HTML : Validate if the input...
Read more >
Custom error handling in Angular reactive forms
Add custom error functions to the form control that takes the field name and validates and returns the exact error message. Lets store...
Read more >
Show Validation Error Messages for Reactive Forms in ...
We can define a reactive form within a component and check if the form is valid, but if there's an error, how do...
Read more >
Angular Custom Form Controls - Complete Guide
In this guide, we are going to learn exactly how to take an existing custom form control component and make it fully compatible...
Read more >
Make Your Angular Form's Error Messages Magically Appear
In this article, we're going to learn how to develop a generic method that displays validation errors in Angular's form.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found