Input type file

[pieinn]

Hi Frank,

What about input type file?

For example to upload avatar image -> validate -> save

enctype="multipart/form-data"

Please advice Thank you

[ferdinandfrank]

Just added a new component to upload images: see FormFileInput. Note: The image will be submitted in base64 format.

Feel free to adapt the component to your needs or even to extend the functionality and to submit a pull request! :)

[pieinn]

I think some mistake in documentation FormFileInput. <form-date-input name="[NAME]"></form-date-input>

<form-data-input name="[NAME]"></form-data-input>- no working <form-file-input name="[NAME]"></form-file-input>- no working

[ferdinandfrank]

Sorry fixed the mistake in the documentation. The correct tag name is form-file-input. Why is it not working? What does it say in your browser's console?

[pieinn]

Firstly form-group not appear. And have following in browser's console: [Vue warn]: Invalid prop: type check failed for prop "rules". Expected Array, got Object.

found in---> at resources/assets/vendor/vue-forms/js/components/inputs/FormInput.vue

at resources/assets/vendor/vue-forms/js/components/AjaxForm.vue

[ferdinandfrank]

That shouldn't be an error on the component, but with the definition of the rules prop on your component instance. As the error says, you are probably passing an object instead of an array as the rules value. So, I guess you are doing something like this:

<form-input name="Name" :rules="{min: 5}"></form-input>

The correct way would be to wrap the rules object within an array, so you can specify multiple rule objects:

<form-input name="Name" :rules="[{min: 5}]"></form-input>

See details here.

[pieinn]

I have corrected. Thank you

But what about form-group not appear?

And please advice how to show error with tooltip?

[pieinn]

Submit Button in ajax-form not active

When i change {require: true} to the [{require: true}]

My code:

<div id="app">
        <ajax-form class="form" method="POST" action="{{ route('user.profile.update') }}" enctype="multipart/form-data" :clear=true>
            {{ csrf_field() }}
            <icon icon="icon-user"></icon>
            <label>@lang('app.your_name')</label>
            <form-input :rules="[{require: true}, {min: 3}]"
                        type="text"
                        name="name"
                        id="name"
                        value={{ Auth::user()->name }}>
            </form-input>
            <icon icon="icon-user_mail"></icon>
            <label>@lang('app.email_address')</label>
            <form-input :rules="[{email: true}]"
                        type="email"
                        name="email"
                        id="email"
                        value={{ Auth::user()->email }}>
            </form-input>
            <icon icon="icon-phone"></icon>
            <label>@lang('app.mobile')</label>
            <form-input :rules="[{require: true}]"
                    type="text"
                    name="mobile"
                    id="mobile" value={{ Auth::user()->mobile }}>
            </form-input>
            <button type="submit" class="btn btn-primary btn-round btn-lg">
                Submit
                <i class="icon-user_check"></i>
            </button>
        </ajax-form>
    </div>

[ferdinandfrank]

• Form group does not appear: What do you mean with form group not appears? Doesn't it render? Are any further errors in your browser's console?

• Show input error with tooltip: Each input component has a data attribute called errorMessage. If a validation error for the input exists this attribute will contain the corresponding error message. To show this error within a tooltip, my suggestion would be the following (assuming that you wanna show the tooltip on the input field):

  1. Modify the component FormInput (or the appropriate input components where you want to have this functionality) by adding a title attribute containing the error message to the input field: FormInput.vue

     ...
     <input :title="errorMessage" :id="name + '-input'" type="text" :name="name" 
            v-model="submitValue" class="form-control"
            :placeholder="placeholder ? placeholder : ''" :step="step" 
            :aria-label="placeholder ? placeholder : ''" 
            :disabled="disabled" ref="input" @focus="activate" @blur="deactivate">
     ...

  2. Add a watcher to the component file, that always shows the tooltip whenever an error exists and hides it when no error exists: FormInput.vue

     watch: {
     errorMessage: function (errorMessage) {
         if (errorMessage) {
             $(this.$refs.input).tooltip('show');
         } else {
             $(this.$refs.input).tooltip('hide');
         }
     },
     },

     Note: I assume that you are using Bootstrap's tooltips

• Submit Button in ajax-form not active: The rule name is called required and not require, you have a typo there. Additionally, the sense of the required rule is that the user can not submit the form (by disabling the submit button), when he didn't enter a value for a required input field (or any other validation error exists). As you stated your mobile input field to be required, but didn't enter a value, the submit button is disabled. But as you have a typo on your rule name, I guess any other validation error exists on your inputs. Try to fix the typo and to remove the required rule from your mobile input field, if you don't want to force the user to enter a value there. Tell me, if the submit button is active now.

[pieinn]

Thank for as usual detailed reply. I will test now.

Form group does not appear: not rendering.

[pieinn]

Submit Button in ajax-form not active: solved change to required and works!