Vuersatile Components

Appearance

On this page

Form ​

Component Form includes everything you need to start building forms without a hustle. It contains a submit button, auto self-validation in each input component which will link to the Form they are contained, and finally it builds a submit object with all the names and values of its fields as properties.

Check console when clicking on submitForm button.

html
<Card>
    <Form @submitForm="log">
        <div class="row">
            <div class="col-12 col-md-6 mb-xs-4">
                <InputText
                    name="email"
                    label="E-mail"
                    placeholder="Enter your e-mail..."
                    icon="at"
                    inputType="email"
                    :validations="['not-empty', 'email']"
                />
            </div>
            <div class="col-12 col-md-6 mb-xs-4">
                <InputPassword
                    name="password"
                    label="Password"
                    placeholder="Enter a secure password..."
                    :validations="['not-empty', { name: 'min-length', params: [8] }]"
                />
            </div>
        </div>
    </Form>
</Card>

Props ​

  • validate: Wether to auto self-validate the Form or not. Type Boolean, default true.
  • submitText: Custom text for submit button. Type String, default null.
html
<Card>
  <Form submitText="Submit" @submitForm="log">
    <Checkbox name="conditions" label="I accept all the terms and conditions" required />
  </Form>
</Card>
  • loading: display submit button as loading and prevents clicking on it. Type Boolean, default false.
html
<Card>
  <Form loading submitText="Submitting" @submitForm="log">
    <Checkbox name="conditions" label="I accept all the terms and conditions" required />
  </Form>
</Card>
  • showSubmitButton: show default submit button or you are going to implement your own submit button. Type Boolean, default true.
html
<Card>
  <Form :showSubmitButton="false" @submitForm="log">
    <Checkbox name="conditions" label="I accept all the terms and conditions" required />
  </Form>
</Card>
  • autoValidateOnStart: Validate on start and disable submit button if form is not valid, or don't validate. Type Boolean, default true.
html
<Card>
  <Form :autoValidateOnStart="false" @submitForm="log">
    <Checkbox name="conditions" label="I accept all the terms and conditions" required />
  </Form>
</Card>
  • scrollOnFail: scroll to the top of the Form if autoValidateOnStart is disabled or you are using your own submit button, you click submit button, and validation fails. Type Boolean, default false.
  • scrollToInvalidField instead of scrolling to top of the Form, scroll to the first component its validation failed. Type Boolean, default false.
  • disableSubmitButton: show submit button as disabled. Type Boolean, default false.
  • resetOnSubmit: to reset or not all Form fields on submit. Type Boolean, default false.
html
<Card>
    <Form resetOnSubmit @submitForm="log">
        <div class="row">
            <div class="col-12 col-md-6 mb-xs-4">
                <InputText
                    name="email"
                    label="E-mail"
                    placeholder="Enter your e-mail..."
                    icon="at"
                    inputType="email"
                    :validations="['not-empty', 'email']"
                />
            </div>
            <div class="col-12 col-md-6 mb-xs-4">
                <InputPassword
                    name="password"
                    label="Password"
                    placeholder="Enter a secure password..."
                    :validations="['not-empty', { name: 'min-length', params: [8] }]"
                />
            </div>
        </div>
        <div class="row">
          <div class="col-12">
            <Checkbox name="conditions" label="I accept all the terms and conditions" required />
          </div>
        </div>
    </Form>
</Card>
  • skipUnmodifiedFields: Skip fields that have not been modified when generating submit object. Type Boolean, default false.

Emits ​

  • @submit: native submit.
  • @submitForm: custom submit.