up.form form[up-submit]

HTML extension

Submits this form via JavaScript and updates a fragment with the server response.

The server response is searched for the selector given in up-target. The selector content is then replaced in the current page.

The programmatic variant of this is the up.submit() function.

Example

<form method="post" action="/users" up-submit>
  ...
</form>

Handling validation errors

When the server was unable to save the form due to invalid params, it will usually re-render an updated copy of the form with validation messages.

For Unpoly to be able to detect a failed form submission, the form must be re-rendered with a non-200 HTTP status code. We recommend to use either 400 (bad request) or 422 (unprocessable entity).

In Ruby on Rails, you can pass a :status option to render for this:

class UsersController < ApplicationController

  def create
    user_params = params[:user].permit(:email, :password)
    @user = User.new(user_params)
    if @user.save?
      sign_in @user
    else
      render 'form', status: :bad_request
    end
  end

end

You may define different option for the failure case by infixing an attribute with fail:

<form method="post" action="/action"
  up-target=".content"
  up-fail-target="form"
  up-scroll="auto"
  up-fail-scroll=".errors">
  ...
</form>

See handling server errors for details.

Note that you can also use input[up-validate] to perform server-side validations while the user is completing fields.

Giving feedback while the form is processing

The <form> element will be assigned a CSS class .up-active while the submission is loading.

Short notation

You may omit the [up-submit] attribute if the form has one of the following attributes:

• [up-target]
• [up-layer]
• [up-transition]

Such a form will still be submitted through Unpoly.

Handling all forms automatically

You can configure Unpoly to handle all forms on a page without requiring an [up-submit] attribute.

See Handling all links and forms.