필수 특성을 가진 vuejs-datepicker가 값 없이 전송됨

필수 특성을 가진 vuejs-datepicker가 값 없이 전송됨

입력 필드의 vuejs-datepicker 설정 html 필수 속성이 예상대로 작동하지 않고 입력 값이 없는 양식을 제출합니다.

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

위의 코드를 사용하여 https://codesandbox.io/s/p92k8l717 에서 테스트 할 수 있습니다.

다음은 repo 및 doc 링크입니다.https://github.com/charliekassel/vuejs-datepicker

vee-validate 라이브러리를 사용하여 다음과 같이 검증할 수 있습니다.

<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">

당신은 이 문제를 해결하기 위해 이 방법을 사용할 수 있습니다, 그것은 나에게 효과가 있습니다.

사용할 수 있습니다.input-attr다음과 같은 필수 속성을 설정합니다.:input-attr="{required: 'true'}"

이 플러그인이 아닌 다른 플러그인과 다른 방법으로도 같은 문제에 직면해 있었습니다.그것은 vee-validate를 사용한 것입니다.

vue-js에 사용할 수 있는 최상의 검증 플러그인입니다.

이게 도움이 됐으면 좋겠네요!

비 Vue DatePicker 라이브러리 Flatpicker에서도 이 문제가 발생합니다.사용자 입력을 허용함으로써 문제를 해결할 수 있었습니다.typeable이 라이브러리의 지지대)를 삭제한다.readonlyAtribute는 빈 필수 필드에 폼을 제출하지 않도록 하고 네이티브브라우저 팝업을 표시합니다.단, 입력 필드에 직접 날짜를 입력할 수 있게 되어 사용자 입력을 구문 분석할 수 있게 됩니다.이를 만회하려면 필드 내의 모든 사용자 입력을 억제해야 합니다.

전체 솔루션을 게시한 동일한 플랫픽 질문을 참조하십시오.제가 사용한 것은onReady안타깝게도 vuejs-datepicker 설정에 해당하는 것으로 보이지 않는 플랫피커의 이벤트입니다.

Flatpickr은 vue-flatpickr-component 라이브러리 덕분에 Vue에서 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/47280866/vuejs-datepicker-with-required-attribute-gets-submitted-without-value