フォームでバリデートにかかるとモーダルを表示させたい

現在、buttonにそのままモーダル要素を記述しているので、エラーでなくても一瞬モーダルが表示されてしまいます。

試したこと
html　14行目のmd_boxをjavascript 9行目のfalseのときにattrで渡す。
→mb_boxのdisplay:none;を他のclass でhtml 14行目に設定し、他の装飾をattrで渡してみる。

よろしくお願い致します。

html
1<html>
2	<head>
3		<meta charset="utf-8">
4		<link href="css/index.css" rel="stylesheet" type="text/css">
5		<script type="text/javascript" src="js/jQuery 3.3.1.js"></script>
6	</head>
7	<body>
8		<form action="login.php" method="post" class="checkform" name="form" onSubmit="return check()">
9				<input type="password" name="pass" size="15" class="pass" placeholder="(例)1234567890">
10				<button type="submit" name="submit" id="md_open" class="md_btn">ログイン</button>
11		</form>
12
13		<div id="md_box"><!--14行目-->
14				<p>半角数字10桁で入力してください。</p>
15				<a id="md_close" class="md_btn">CLOSE</a>
16		</div>
17	</body>
18</html>

javascript
1		<script>
2			//フォームバリデート　始まり
3			function check(){
4				var flag = 0;
5				if(document.form.pass.value.match(/[^0-9]+|^.{0,9}$|.{11}/)){
6					flag = 1;
7				}
8				if(flag){
9					return false;//9行目
10				}else{
11					return true;
12				}
13			}
14			//フォームバリデート　終わり
15
16			//モーダルウィンドウ　始まり
17			var win = $(window);
18			var w = win.width();
19			var h = win.height();
20			var m_open = $('#md_open');
21			var m_close = $('#md_close');
22			var m_content = $('#md_box');
23
24			$(document).ready(function(){
25					centeringModalSyncer(); //センタリング
26			});
27
28			//クリックしたら表示
29			m_open.click(function(){
30					$(this).blur() ; 
31					if( $('#md_overlay')[0] ) return false ; 
32					//オーバーレイを表示
33					$('body').append( '<div id="md_overlay"></div>' );
34
35					var m_overlay = $('#md_overlay'); 
36					m_overlay.fadeIn(1000) ;
37					//フェードイン
38					m_content.fadeIn(1000) ;
39					//クリックした時
40					m_overlay.add(m_close).unbind().click( function(){
41							
42							m_content.add(m_overlay).fadeOut(1000,function(){
43									//オーバーレイを削除
44									m_overlay.remove() ;
45							});
46					});
47			});
48
49			//センタリング
50			win.resize(function(){
51					centeringModalSyncer();
52			});
53			//モーダルをセンタリング
54			function centeringModalSyncer(){
55					w = win.width();
56					h = win.height();
57					//幅、高さ
58					var cw = m_content.outerWidth();
59					var ch = m_content.outerHeight();				
60					m_content.css({
61							'left': ((w - cw)/2) + 'px',
62							'top': ((h - ch)/2) + 'px'
63					});
64			}
65		//モーダルウィンドウ　終わり
66		</script>
67

css
1
2@charset "UTF-8";
3
4/*モーダル*/
5#md_box{
6    width:50%;
7    margin:0 auto;
8    padding:20px;
9    border:2px solid #aaa;
10    background:#fff;
11    z-index:2;
12    display: none;
13    position:fixed;
14}
15.md_btn{
16    color:#fff;
17    text-align: center;
18    background-color: #333;
19    padding: 10px 0;
20    display: block;
21    font-size: 13px;
22    width: 150px;
23    margin-left: auto;
24    margin-right: auto;
25}
26.md_btn:hover{
27    cursor:pointer;
28    color:#aaa;
29}
30#md_overlay{
31    z-index:1;
32    display:none;
33    position:fixed;
34    top:0;
35    left:0;
36    width:100%;
37    height:120%;
38    background-color:rgba(0,0,0,0.75);
39}
40

m.ts10806

2018/06/18 03:49

問題解決とは直接は関係ないのですが、jQueryを利用するのであればjQueryの記述で統一された方がスッキリすると思います。

m.ts10806

2018/06/18 06:38

JavaScript はどこから読み込んでいるのでしょうか。まさか、jQuery 3.3.1.jsに直接書いている？

行動規範の内容に同意します

回答1件

ベストアンサー

モーダル表示を#m_open（サブミットボタン）クリック時ではなく
単純にバリデーションにかかったときにすれば良いのでは？
ボタン自身を何か使うのでなければ、clickイベントにする意味はないと思います。
blur()も実際必要かどうか検討の余地が必要ですし、最悪$("#md_open").blur();と直で入れればいいだけです。

投稿2018/06/18 06:45

m.ts10806

総合スコア80850