Form validation: validate only the field you interact with

[codechips]

Hello! I am not sure if Surface is using LiveView's error helpers under the hood, but I have small trouble with form validation. When one field in the form is invalid every other field shows errors too even though the user hasn't interacted with them yet. Couldn't find anything in the docs about it. Hoping that someone here can give me some tips on how to solve it 😺

[dvic]

This should be handled automatically for you by the Phoenix JS code, see https://hexdocs.pm/phoenix_live_view/form-bindings.html#phx-feedback-for. Can you share the raw HTML of your form? (there should be a phx-feedback-for to make this work). The Surface ErrorTag component should set this up properly for you (see the tests in https://github.com/surface-ui/surface/blob/master/test/surface/components/form/error_tag_test.exs)

[codechips]

I checked and there is no phx-feedback-for initially in the raw HTML. However, if I interact with any of the form inputs all fields get validated. The HTML for error tag looks correct.

<span class="form-error" phx-feedback-for="slack_notification_value">can't be blank</span>

The form itself looks like this:

    <Form
      for={@slack_changeset}
      as={:slack_notification}
      change="slack-form-change"
      submit="slack-form-submit"
      class="px-8 py-4 bg-gray-200 space-y-4"
      opts={autocomplete: "off"}
    >
      <div>
        <Label class="form-label" field={:name}>
          Identifier
        </Label>
        <div class="flex space-x-4 items-center">
          <Field name={:name} class="w-full md:w-1/2">
            <TextInput
              class={"w-full", invalid: state_class(@slack_changeset, :name)}
              opts={placeholder: "Identifier", phx_debounce: "blur"}
            />
          </Field>
          <Field name={:private} class="flex-shrink-0">
            <Checkbox />
            <Label class="ml-1 text-gray-700">Share private notes</Label>
          </Field>
        </div>
        <ErrorTag field={:name} />
      </div>
      <Field name={:value}>
        <Label class="form-label" text="Webhook" />
        <TextInput
          class={"w-full", invalid: state_class(@slack_changeset, :value)}
          opts={placeholder: "Webhook", phx_debounce: "blur"}
        />
        <ErrorTag field={:value} />
      </Field>
      <div>
        <button class="btn primary" type="submit">Add</button>
        <button type="button" class="cancel" :on-click="slack-form-hide">Cancel</button>
      </div>
    </Form>

and event handler like this

  def handle_event("slack-form-change", %{"slack_notification" => attrs}, socket) do
    changeset =
      Notifications.new_slack_notification(attrs) |> Map.put(:action, :validate)

    {:noreply, assign(socket, :slack_changeset, changeset)}
  end

[sfusato]

Do you have the following in your css?

.phx-no-feedback.form-error,
.phx-no-feedback .form-error {
  display: none;
}

[codechips]

Nope, but added it. No difference. The thing is that there is no phx-no-feedback anywhere in the form to be found.

[codechips]

I think that I have finnaly figured it out now 🎉 The reason for this behaviour is that I have another required property (org_id) in the Ecto changeset that I set explicitely on the "create" command. As soon as I removed it from the "validation" changeset everything started behaving as expected. Thanks for all the help and hope that this can save someone time. Remember: Make sure to have a 1-to-1 relationship between your changeset and your form 😅