CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2vuejs-datepicker
Syed
Syed

Reputation: 16513

vuejs-datepicker with required attribute gets submitted without value

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

Upvotes: 5

Views: 7297

Answers (4)

mik13ST
mik13ST

Reputation: 95

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.

Upvotes: 0

user2306941
user2306941

Reputation: 311

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

Upvotes: 2

Shailesh Matariya
Shailesh Matariya

Reputation: 840

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.

Upvotes: 3

drunkZombie
drunkZombie

Reputation: 163

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!

Upvotes: 0

Related Questions