javascript - vuejs-datepicker with required attribute gets submitted without value - Stack Overflow

admin管理员组

文章数量:1312748

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:

Here is the link to repo and doc:

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./charliekassel/vuejs-datepicker

• javascript
• html
• vue.js
• vuejs2
• vuejs-datepicker

Share Improve this question Follow asked Nov 14, 2017 at 8:25 SyedSyed 16.5k1414 gold badges126126 silver badges157157 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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

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!

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 plete 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-ponent library if you are OK with migrating.

本文标签： javascriptvuejsdatepicker with required attribute gets submitted without valueStack Overflow