Posts tagged with form

Reusable Input Components without Livewire, with Livewire

fly.io - submitted by Johannes Werbrouck

Having reusable input components is great. Knowing how to make them is even better! Follow along to see how we can create a generic TextInput component with a fluent interface that can be reused everywhere with just a few lines of code. While it won’t be a Livewire component, it can still make use of wire:model and other Livewire goodies. How is that possible? Read on to find out!

Read more [fly.io]

Join 9,000+ developers

Every month, I share practical tips, tutorials, and behind-the-scenes insights from maintaining 300+ open source packages.

No spam. Unsubscribe anytime. You can also follow me on X.

A tags field for Nova apps original

by Freek Van der Herten – 4 minute read

A while ago I ditched the custom admin of this blog in favour of Laravel Nova. As you might have noticed every blog post on murze.be has some tags. Nova ships with many form fields but a field to use tags is not included out of the box. That's why I created my own tags field and released it as…

Read more

Why your form only needs one name field

uxmovement.com

Here are some good reasons why you shouldn't use a first name and last name field.

The structure of a name is not the same across cultures. Users who visit your site will consist of a broad range of people from different countries. Your name field should be culturally inclusive so that no one struggles to fill out your form. With most things in life two is better than one. But when it comes to name fields one is better than two.

Read more [uxmovement.com]

Native HTML5 form validation in 6 lines of code

Dave Rupert, lead developer at Paravel, shows how you can leverage native form validation and still style your errors using only a couple of lines of JavaScript.

If you’ve ever experimented with HTML5 Form Validation, you’ve probably been disappointed. The out-of-box experience isn’t quite what you want. Adding the required attribute to inputs works wonderfully. However the styling portion with input:invalid sorta sucks because empty inputs are trigger the :invalid state, even before the user has interacted with the page. I finally sat down and spent a couple days trying to make HTML5 Form Validation work the way I want it.

https://daverupert.com/2017/11/happier-html5-forms/

Read more

Some request filtering macros

In a gist on GitHub Adam Wathan shares some macros that can be used to clean up a request.

Allows you to trim things, lowercase things, whatever you want. Pass a callable or array of callables that each expect a single argument:
Request::macro('filter', function ($key, $filters) {
    return collect($filters)->reduce(function ($filtered, $filter) {
        return $filter($filtered);
    }, $this->input($key));
});

https://gist.github.com/adamwathan/610a9818382900daac6d6ecdf75a109b

If you want to hear Adam talk some more about troubles with requests (generated by webforms) and possible solutions, listen to this episode of the Full Stack Radio Podcast.

Read more

Cleaning Up Form Input with Transpose

Adam Wathan has another excellent article on using collections. This time he tackles the less used transpose-function.

Transpose is an often overlooked list operation that I first noticed in Ruby.

The goal of transpose is to rotate a multidimensional array, turning the rows into columns and the columns into rows.

http://adamwathan.me/2016/04/06/cleaning-up-form-input-with-transpose/

Personally, I can't wait until the release of his book: Refactoring To Collections.

Read more