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なのかなと思いますが、ダイアログ表示がどういう仕掛けで動いているのかわからないので、修正ポイントも検討が付かない状態です。
何かアドバイスを宜しくお願いします。
あなたの回答
tips
プレビュー