forms

typescript
import { z } from 'zod'

export const postSchema = z.object({
  title: z
    .string()
    .min(5, 'Title must be at least 5 characters')

React Hook Form with Zod validation

react forms react-hook-form
by Maya Patel 2 tabs
erb
<%= form_with model: @document, data: { controller: "upload" } do |form| %>
  <div class="field">
    <%= form.label :file, "Attach a document" %>
    <%= form.file_field :file,
          direct_upload: true,
          data: { upload_target: "input" } %>

Active Storage direct upload progress with Stimulus

rails hotwire stimulus
by codesnips 3 tabs
erb
<%= turbo_stream_from :comments %>

<section class="comments">
  <h2>Discussion</h2>

  <%= turbo_frame_tag "new_comment" do %>

Inline create form that prepends into a list with Turbo Streams

rails hotwire turbo
by codesnips 4 tabs
typescript
export type Validator = (value: string) => string | null;

export const required = (message = 'This field is required'): Validator => {
  return (value) => (value.trim().length === 0 ? message : null);
};

Field-Level Form Validation with a Reusable useField Hook in React

react hooks forms
by codesnips 3 tabs
typescript
import { useEffect, useState } from "react";

export function useDebouncedValue<T>(value: T, delay = 800): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {

Debounced Draft Autosave with React Query and a Saving-Status Indicator

react react-query autosave
by codesnips 4 tabs
ruby
class SignupsController < ApplicationController
  def new
    @user = User.new
  end

  def create

Inline form validation feedback via Turbo Streams

rails hotwire turbo
by codesnips 4 tabs
typescript
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

function hasActualValue(control: AbstractControl | null): boolean {
  return !!control && control.value !== null && control.value !== '';
}

Cross-Field Password-Confirmation Validator for Angular Reactive Forms

angular reactive-forms validators
by codesnips 3 tabs
javascript
import { useCallback, useEffect, useState } from 'react';

function parseSearch(search) {
  const params = new URLSearchParams(search);
  const out = {};
  for (const [key, value] of params.entries()) out[key] = value;

Sync React Form State to the URL Query String with a Debounced useSearchParams Hook

react hooks url-state
by codesnips 3 tabs
php
<?php

namespace App\Dto;

use Symfony\Component\HttpFoundation\File\UploadedFile;
use Symfony\Component\Validator\Constraints as Assert;

Symfony Avatar Upload: Constrained Form Type, Image Validation, and an Uploader Service

symfony forms validation
by codesnips 4 tabs
python
import magic
from django import forms
from django.core.exceptions import ValidationError
from django.template.defaultfilters import filesizeformat

Validating Upload Size and MIME Type in a Custom Django Form Field

django forms file-upload
by codesnips 3 tabs
typescript
import { useCallback, useEffect, useReducer } from "react";

type State = { secondsLeft: number; isRunning: boolean };
type Action =
  | { type: "start"; seconds: number }
  | { type: "tick" }

Resend-Code Button With a Countdown Timer Using useEffect Cleanup

react hooks useeffect
by codesnips 3 tabs
python
import re

EMAIL_RE = re.compile(r"^[^@\s]+@[^@\s]+\.[^@\s]+$")


class SignupValidator:

Validate a Flask Signup Form and Collect Per-Field Errors

flask validation forms
by codesnips 4 tabs