vuejs-datepicker with required attribute gets submitted without value

Question

vuejs-datepicker setting html required attribute on input fields doesn't work as expected and submits the form without have a input value.

<form>
  <datepicker placeholder="Select Date" required></datepicker> 
  <button>Submit</button>
</form>

You can use the above code and test here: https://codesandbox.io/s/p92k8l717

Here is the link to repo and doc: https://github.com/charliekassel/vuejs-datepicker

Shailesh Matariya · Answer 1 · 2018-04-06T08:57:06.057

3

You can use vee-validate library to validate this like:

<date-picker :input-class="{'input': true, 'is-danger': errors.has('date') }"
            v-model="date"
            :disabled="state.disabled"
            placeholder="Select date"
            input-class="form-control"
            ></date-picker>
    <span v-show="errors.has('date')" class="help is-danger-red">{{ errors.first('date') }}</span>
    <input type="hidden" name="date" v-validate="'required'" v-model="date">

You can use this trick to solve this issue, It's works for me.

edited Apr 06 '18 at 08:57

answered Apr 06 '18 at 08:01

Shailesh Matariya

830
4
13

i don't use v-model for another reason, i use :value how can i do that ? – Freddy Sidauruk Nov 30 '18 at 09:02
Thanks @Shailesh Matariya !! :) That was really helpful !! :) – KodeFor.Me Mar 08 '19 at 07:17

score 2 · Answer 2 · answered Jun 29 '20 at 07:09

2

You can use input-attr to set the required attribute like :input-attr="{required: 'true'}"

answered Jun 29 '20 at 07:09

user2306941

311
1
3
13

score 0 · Answer 3 · answered Dec 10 '17 at 20:36

0

I was facing the similar issue, not with this plugin but some other plugin and one get around that worked for me was using vee-validate

This is the best validation plugin available for vue-js.

Hope this helps!

answered Dec 10 '17 at 20:36

drunkZombie

112
2
15

mik13ST · Answer 4 · 2021-09-02T15:37:46.280

A non-Vue datepicker library flatpickr also has this problem. I managed to resolve it by allowing user input (typeable prop of this library) which removes the readonly attribute which actually prevents the form submission on empty required field and also displays the native browser popup. The side effect is a date can now be directly typed into the input field which then forces you to parse the user input. To make up for that you have to suppress all user input in the field.

See the similar flatpickr question where I posted the complete solution. I used the onReady event of flatpickr which seems to have no equivalent in vuejs-datepicker settings unfortunately.

Flatpickr can be used in Vue thanks to vue-flatpickr-component library if you are OK with migrating.

vuejs-datepicker with required attribute gets submitted without value

4 Answers4