Skip to content

E
Ecsite
Commit 17790cdc authored by keita.onoguchi's avatar keita.onoguchi
Browse files
Options

Merge branch 'ログイン編集' into 'master' 

新規登録フォームバリデーション追加

See merge request !79
parents 3b509ff3 8d96fbe2
Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 14 deletions
src/main/resources/static/css/style.css
View file @ 17790cdc
...@@ -1568,7 +1568,7 @@ label { ...@@ -1568,7 +1568,7 @@ label {
/* フォームを中央寄せなど */ /* フォームを中央寄せなど */
#login-form { #login-form {
text-align: center; text-align: center;
margin: 100px 0 150px; margin: 100px 0 150px 0;
} }
/* 案内テキスト */ /* 案内テキスト */
...@@ -1637,6 +1637,7 @@ label { ...@@ -1637,6 +1637,7 @@ label {
.sign-up-form-label { .sign-up-form-label {
width: 150px; width: 150px;
color: #000; color: #000;
text-align: left;
} }
.sign-up-form { .sign-up-form {
...@@ -1672,8 +1673,8 @@ label { ...@@ -1672,8 +1673,8 @@ label {
} }
.attention { .attention {
color: red; color: Grey;
margin-left: 190px; margin-left: 265px;
text-align: left; text-align: left;
} }
......
src/main/resources/static/js/login.js
View file @ 17790cdc
...@@ -36,6 +36,7 @@ $('#ok-btn').on('click', function(){ ...@@ -36,6 +36,7 @@ $('#ok-btn').on('click', function(){
}).done(function(response, textStatus, jqXHR ) { }).done(function(response, textStatus, jqXHR ) {
$('.js-modal').fadeOut(); $('.js-modal').fadeOut();
}).fail(function(jqXHR, textStatus, errorThrown) { }).fail(function(jqXHR, textStatus, errorThrown) {
alert("Failed."); //alert("Failed.");
}); });
}); });
\ No newline at end of file
src/main/resources/templates/login.html
View file @ 17790cdc
...@@ -11,11 +11,21 @@ ...@@ -11,11 +11,21 @@
<link rel="icon" href="images/favicon.png" th:href="@{/images/favicon.png}"/> <link rel="icon" href="images/favicon.png" th:href="@{/images/favicon.png}"/>
<link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/> <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/>
<title>Limited</title> <title>Limited</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" th:href="@{https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css}" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script> <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]--> <![endif]-->
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
$(function(){
jQuery("#form_1").validationEngine();
});
/*]]>*/
</script>
</head> </head>
<body> <body>
...@@ -88,43 +98,46 @@ ...@@ -88,43 +98,46 @@
<div class="modal js-modal"> <div class="modal js-modal">
<div class="modal__bg js-modal-close"></div> <div class="modal__bg js-modal-close"></div>
<div class="modal__content"> <div class="modal__content">
<form id="form_1">
<div class="sign-up-form"> <div class="sign-up-form">
<p id="sign-up-text">Sign Up</p> <p id="sign-up-text">Sign Up</p>
<label for="name" class="sign-up-form-label">Name</label> <label for="name" class="sign-up-form-label">Name</label>
<input type="text" id="name" class="sign-up-form-input" placeholder="Name" required="required"/> <input type="text" id="name" class="sign-up-form-input validate[required]" placeholder="Name"/>
<p id="nameMsg"></p>
</div> </div>
<div class="sign-up-form"> <div class="sign-up-form">
<label for="postal-code" class="sign-up-form-label">Postal Code</label> <label for="postal-code" class="sign-up-form-label">Postal Code</label>
<input type="text" id="postal-code" class="sign-up-form-input" placeholder="Postal Code" required="required"/> <input type="text" id="postal-code" class="sign-up-form-input validate[required,custom[number],maxSize[7]]" placeholder="Postal Code"/>
<p class="attention">Please enter 7-digit alphanumeric characters with no hyphens.</p> <p class="attention">Please enter 7-digit alphanumeric characters with no hyphens.</p>
</div> </div>
<div class="sign-up-form"> <div class="sign-up-form">
<label for="address" class="sign-up-form-label">Address</label> <label for="address" class="sign-up-form-label">Address</label>
<input type="text" id="address" class="sign-up-form-input" placeholder="Address" required="required"/> <input type="text" id="address" class="sign-up-form-input validate[required]" placeholder="Address"/>
<p class="attention">Please enter numbers in half-width characters.</p> <p class="attention">Please enter numbers in half-width characters.</p>
</div> </div>
<div class="sign-up-form"> <div class="sign-up-form">
<label for="phone-number" class="sign-up-form-label">Phone Number</label> <label for="phone-number" class="sign-up-form-label">Phone Number</label>
<input type="text" id="phone-number" class="sign-up-form-input" placeholder="Phone Number" required="required"/> <input type="text" id="phone-number" class="sign-up-form-input validate[required,custom[number],maxSize[11]]" placeholder="Phone Number"/>
<p class="attention">Please enter 11-digit alphanumeric characters with no hyphens.</p> <p class="attention">Please enter 11-digit alphanumeric characters with no hyphens.</p>
</div> </div>
<div class="sign-up-form"> <div class="sign-up-form">
<label for="email" class="sign-up-form-label">Email</label> <label for="email" class="sign-up-form-label">Email</label>
<input type="email" id="email" class="sign-up-form-input" placeholder="Email" required="required"/> <input type="email" id="email" class="sign-up-form-input validate[required,custom[email]]" placeholder="Email"/>
</div> </div>
<div class="sign-up-form"> <div class="sign-up-form">
<label for="password" class="sign-up-form-label">Password</label> <label for="password" class="sign-up-form-label">Password</label>
<input type="password" id="password" class="sign-up-form-input" placeholder="Password" required="required"/> <input type="password" id="password" class="sign-up-form-input validate[required]" placeholder="Password"/>
</div> </div>
<div> <div>
<button class="js-modal-sign-up" id="ok-btn">Ok</button> <button class="js-modal-sign-up" id="ok-btn">Ok</button>
<button class="js-modal-close" id="close-btn">Close</button> <button class="js-modal-close" id="close-btn">Close</button>
</div> </div>
</form>
</div><!--modal__inner--> </div><!--modal__inner-->
</div><!--modal--> </div><!--modal-->
<!-- モーダル用 --> <!-- モーダル用 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- JQUERY --> <!-- JQUERY -->
<!-- <script src="js/vendor/jquery-1.11.2.min.js" th:src="@{/js/vendor/jquery-1.11.2.min.js}"></script> <!-- <script src="js/vendor/jquery-1.11.2.min.js" th:src="@{/js/vendor/jquery-1.11.2.min.js}"></script>
<script src="js/vendor/bootstrap.min.js" th:src="@{/js/vendor/bootstrap.min.js}"></script> <script src="js/vendor/bootstrap.min.js" th:src="@{/js/vendor/bootstrap.min.js}"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment