質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

454閲覧

JQuery入力チェックの仕方について

mi37

総合スコア13

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/03/22 05:29

jQueryで必須チェックをかけているのですが、思うようにいきません。

イメージ説明
このようなイメージにしたく、この元ソースは

<link href="./js/libs/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"> <link href="./css/form.css" rel="stylesheet"> <link href="./css/style.css" rel="stylesheet"> <script src="./js/libs/jquery-2.2.1.min.js"></script> <script src="./js/libs/my.pack.js"></script> <script src="./js/libs/jquery-confirm/jquery-confirm.min.js"></script> <script src="./js/libs/validate/jquery.validate.min.js"></script> <script src="./js/libs/validate/localization/messages_ja.min.js"></script> <script> (function($) { $(function(){ // form validator $.validator.addMethod('num', function(value, element) { return this.optional(element) || /^[\d,-]+$/.test(value); }, "数字(半角)を入力して下さい"); $('.frm dl').each(function(idx,elm){ if(!($(elm).hasClass('opt'))){ $('input[type=text], textarea',elm).addClass('required'); } }); $('#form1').validate({ 'focusInvalid':false, onfocusout: function(element) {$(element).valid()}, invalidHandler: function(form, validator){ var errors = validator.numberOfInvalids(); if (errors) { var message = errors + ' つの項目でエラーがあります。入力項目をご確認の上、再度確認ボタンをクリックしてください。' $(".ErrorMessage span").html(message); $(".ErrorMessage").show(); $('body, html').animate({scrollTop:$('.ErrorMessage').offset().top - 100}, 500,'easeOutExpo'); } else { $(".ErrorMessage").hide(); } } }); $(".ErrorMessage").hide(); }); })(jQuery); <div class="ErrorMessage"><span></span></div> <form action="" class="frm" id="form1"> <dl class="login-id"><dt><span>ログインID</span></dt><dd><span><input class="required" type="text" name="login-id" value="" placeholder="ログインID"></span></dd></dl> <dl class="login-pw"><dt><span>パスワード</span></dt><dd><span><input class="required" type="password" name="login-password" value="" placeholder="パスワード"></span></dd></dl> <div class="btns"><button class="btn btn_posi" type="submit" value="">ログイン</button></div> </form>

これをAngularで書き換えているのですが
<index.html>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/localization/messages_ja.js"></script>

<login.component.html>

<div class="ErrorMessage"><span></span></div> <!--<form action="" class="frm" id="form1">--> <form [formGroup]="loginForm" class="frm" id="form1" (ngSubmit)="onLoginFormSubmit()"> <!--<div ><span><label *ngIf="loginForm.get('loginId').invalid && processValidation" [ngClass] = "'required'"> ID is required. </label></span></div>--> <dl class="login-id"><dt><span>ログインID</span></dt><dd><span><input class="required" type="text" formControlName="loginId" value="" placeholder="ログインID"></span></dd></dl> <dl class="login-pw"><dt><span>パスワード</span></dt><dd><span><input class="required" type="password" formControlName="password" value="" placeholder="パスワード"></span></dd></dl> <div class="btns"><button class="btn btn_posi" type="submit" value="" >ログイン</button></div> </form>

<login.component.ts>

onLoginFormSubmit() { // form validator $.validator.addMethod('num', function(value, element) { return this.optional(element) || /^[\d,-]+$/.test(value); }, "数字(半角)を入力して下さい"); $('.frm dl').each(function(idx,elm){ if(!($(elm).hasClass('opt'))){ $('input[type=text], textarea',elm).addClass('required'); } }); $('#form1').validate({ 'focusInvalid':false, onfocusout: function(element) {$(element).valid()}, invalidHandler: function(form, validator){ var errors = validator.numberOfInvalids(); if (errors) { var message = errors + ' つの項目でエラーがあります。入力項目をご確認の上、再度確認ボタンをクリックしてください。' $(".ErrorMessage span").html(message); $(".ErrorMessage").show(); $('body, html').animate({scrollTop:$('.ErrorMessage').offset().top - 100}, 500,'easeOutExpo'); } else { $(".ErrorMessage").hide(); } }, submitHandler: function(form) { } }); $(".ErrorMessage").hide(); }

これで実行すると
イメージ説明

このようになります。
メッセージが日本語にならないのと、
ダイアログ的な表示ができていません。
日本語にするのは、messages_ja.min.jsなのかなと思いますが、ダイアログ表示がどういう仕掛けで動いているのかわからないので、修正ポイントも検討が付かない状態です。

何かアドバイスを宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問