Form

Create beautiful forms validate them without the hassle.

Form Submission

Gravity will automatically handle AJAX form validation and submission for you.

To submit a form with AJAX, simply add the class .use-ajax to your form, it's that easy! You will need to specify an action and method on the form for this to work.

If you'd like to redirect to a different page after submission, then include a data-redirect attribute.

<form action="/user/create" method="POST" class="use-ajax" data-redirect="/dashboard">

Form Validation

If you want Gravity to validate your form, you must specify a novalidate attribute on the form to disable the default browser validation.

<form action="/user/create" method="POST" novalidate class="use-ajax" data-redirect="/dashboard">

Inputs will be automatically validated based on their type.

<input type="email">

To force a required input, add the required attribute.

<input type="email" required >

Form Callbacks

You can execute a custom callback function after a successful form submission by specifying a callback function name and parameters in the server response.

For example:

res.send({
  success: true,
  callback: "updateTableRow",
  callbackParams: { id: 3, values: [name, email] }
});

If you'd like to just show a notification, then you can send a message from the server.

res.send({
  success: true,
  message: "Your settings have been updated"
});

Handling Form Errors

You can either show a notification error, or an inline error on an input, depending on the response you send from the server.

Notification Error

res.send({
  success: false,
  message: "Your settings have been updated"
});

Inline Form Error

Specify the name of the input to show the error message on.

res.send({
  success: false,
  inputError: "email"
  message: "You are already registered"
});