Q&A
面白そうです。
是非現状のエラーコードまで共有してもらえると幸いです
この質問をvue.jsでうまく実装したいと思っています。
色々トライしましたがうまくいきませんでした。
reportValidity()がうまく使えないです。。
html
1<!DOCTYPE html 2> 3<html xmlns:th="http://www.thymeleaf.org" 4 xmlns:layout="http://www.iltraq.net.nz/thymeleaf/layout" 5 layout:decorate="~{layouts/layout}" 6 lang="ja"> 7 8<head> 9 <meta charset="utf-8"> 10 <title>test</title> 11 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> 12 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> 13</head> 14 15<body> 16 17 <!-- formエリア --> 18 <form id="form"> 19 <div class="py-2"> 20 <section id="information"> 21 <div class="container-fluid"> 22 <div class="row"> 23 24 <div class="col-md-12"> 25 <!--ユーザーCD--> 26 <div class="row"> 27 <div class="col-5 table-danger"> 28 <label class="custom-fontSize" for="userCd">ユーザーCD</label> 29 </div> 30 <div class="col-7"> 31 <input type="text" name="userCd" class="col-11 form-control custom-fontSize" id="userCd" required /> 32 </div> 33 </div> 34 35 <!--パスワード--> 36 <div class="row py-5"> 37 <div class="col-5 table-danger"> 38 <label class="custom-fontSize" for="userPass">パスワード</label> 39 </div> 40 <div class="col-7"> 41 <input type="password" name="userPass" class="col-11 form-control custom-fontSize" id="userPass" required /> 42 </div> 43 </div> 44 </div> 45 46 <!--ボタン--> 47 <div class="col-md-12 py-5"> 48 <div class="row no-gutters"> 49 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-3"> 50 <button type="button" class="btn btn-info custom-btn" @click='syukin()'>出勤</button> 51 </div> 52 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-3"> 53 <button type="button" class="btn btn-danger custom-btn" @click='taikin()'>退勤</button> 54 </div> 55 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-3"> 56 <button type="button" class="btn btn-success custom-btn" @click='kyukei()'>休憩</button> 57 </div> 58 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-3"> 59 <button type="button" class="btn btn-warning custom-btn"><a class="text-white" >勤怠一覧</a></button> 60 </div> 61 </div> 62 </div> 63 </div> 64 </div> 65 </section> 66 </div> 67 </form> 68 <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script> 69 <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script> 70 <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> 71 <script src="sample.js"></script> 72</body> 73</html>
javascript
1//フォーム 2var form = new Vue({ 3 //紐づくセレクター 4 el : '#form', 5 6 //メソッド 7 methods : { 8 //出勤 9 syukin : function(){ 10 //ここでformの入力チェックが動かしたい 11 12 alert("出勤しました。"); 13 }, 14 //退勤 15 taikin : function(){ 16 //ここでformの入力チェックが動かしたい 17 18 19 alert("退勤しました。"); 20 }, 21 //休憩 22 kyukei : function(){ 23 //ここでformの入力チェックが動かしたい 24 25 alert("休憩情報を登録しました。"); 26 } 27 } 28}); 29
回答1件
0
ベストアンサー
- それぞれの
input要素にref属性を追加
html
1<input type="text" name="userCd" class="col-11 form-control custom-fontSize" id="userCd" ref="userCd" required />
html
1<input type="password" name="userPass" class="col-11 form-control custom-fontSize" id="userPass" ref="userPass" required />
- 各メソッドで
reportValidityの呼び出し
js
1//出勤 2syukin: function(e) { 3 //ここでformの入力チェックが動かしたい 4 if (!this.$refs.userCd.reportValidity()) return false; 5 if (!this.$refs.userPass.reportValidity()) return false; 6 7 alert("出勤しました。"); 8}, 9// 以下同じなので省略
で可能だと思います。
投稿2019/06/08 04:59
編集2019/06/08 05:00
総合スコア1011
あなたの回答
tips
プレビュー
