以下の画像のようなフォームを作っています。
キャンセルボタンはa要素で構成しており、クリックすると前の画面に戻るようにしています。
jquery-validateプラグインを使って、
テキストボックスからフォーカスが外れた際に文字数のチェックをします。
以下の画像のように、エラーメッセージはテキストボックスの下に表示させています。
(文字数が2文字以下だとメッセージが出ます)
この場合に、
- テキストボックスに1文字入力する。
- テキストボックスにフォーカスが入った状態のまま、キャンセルボタンを押す。
という操作を行った場合、前の画面に戻れません。
その上、なぜかバリデーションが効いてしまい、エラーメッセージが表示されます。
どうすれば、前の画面に戻れますでしょうか?
以下、コードです。
HTML
1<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script> 2 3<form id="form"> 4 <div class="form-group"> 5 <input type="text" id="test" name="test" minlength="2"> 6 </div> 7 <div class="buttons"> 8 <input type="submit" value="更新" class="btn btn-submit"> <a href="#" class="btn" id="cancel">キャンセル</a> 9 </div> 10</form>
javascript
1$('#form').validate();
CSS
1.form-group, 2.buttons { 3 display: block; 4 margin-bottom: 12px; 5} 6 7.btn { 8 background: #fff; 9 border: 1px solid #ddd; 10 border-radius: 4px; 11 box-sizing: border-box; 12 color: #666; 13 cursor: pointer; 14 display: inline-block; 15 font-size: 14px; 16 padding: 4px 12px; 17 text-align: center; 18 text-decoration: none; 19 width: 120px; 20} 21 22.btn-submit { 23 background: #23cc70; 24 border-color: #23cc70; 25 color: #fff; 26} 27 28.error { 29 color: red; 30 display: block; 31}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。