[FormBuilder] Support more validators

[MangelMaxime]

Issue by MangelMaxime Thursday Nov 29, 2018 at 08:37 GMT Originally opened as https://github.com/MangelMaxime/Thoth/issues/92

---

Ideally we would have the most common types of field and they would come with sensible defaults including validation as standard. I was wondering about using validator.js for this:

https://github.com/chriso/validator.js https://www.npmjs.com/package/@types/validator Like you know how in html a Form at it's most basic is:

  <form>
    <input name="name" placeholder="Name" />
    <input name="email" placeholder="Email" type="email" />
    <input type="submit">
  </form>

I wonder if we could make BasicFields (maybe in Fulma?) as close as possible to this sort of simple experience, but of course with all the power of F# and this library behind the simple interface

Apologies this has little to with React, more to do with "optimized experience"

Originally posted by @fergusmeiklejohn in https://github.com/MangelMaxime/Thoth/issues/90#issuecomment-442742896

[MangelMaxime]

Comment by MangelMaxime Thursday Nov 29, 2018 at 08:48 GMT

---

the most common types of field

I think we already support the most common types of field. By that, I mean input, radioButton, select, textarea, checkbox.

with sensible defaults including validation as standard

About adding more validators yes this is possible. The ideal would be to either use an existing JavaScript library or create our own so we can extends it.

And I don't think creating an BasicEmailInput, BasicNumberInput, etc. is a solution because there will have a lot of code duplications.

I would prefer to go with something like:

BasicInput
    .Create("email")
    .WithType("email")
    .IsEmail()
    .IsRequired()
    .WithDefaultRenderer()

And yes it probably possible to make it mark type = "email" when you use IsEmail, but it can be difficult to provide a good UX doing that. Because then some of the configuration because implicit and so the user need more knowledge about it.

I wonder if we could make BasicFields (maybe in Fulma?) as close as possible to this sort of simple experience, but of course with all the power of F# and this library behind the simple interface

The BasicFields, will never depends on Fulma because I want everyone to be able to use it and if Fulma is a dependencies then it is a no go. There will be a dedicated FormBuilder library for Fulma.

The most powerful feature of FormBuilder is that the core is able to manage any type of Input and you can create your own depending on your needs:

For example, at work I needed a sort of color picker, I have been able to create my specific field in 30 minutes. And use it in several places of my application "for free" now.