Skip to content

E
Ecsite
Commit 8d96fbe2 authored by keita.onoguchi's avatar keita.onoguchi
Browse files
Options

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

parent 82cae758
Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 14 deletions
src/main/resources/static/css/style.css
View file @ 8d96fbe2
......@@ -1568,7 +1568,7 @@ label {
/* フォームを中央寄せなど */
#login-form {
text-align: center;
margin: 100px 0 150px;
margin: 100px 0 150px 0;
}
/* 案内テキスト */
......@@ -1637,6 +1637,7 @@ label {
.sign-up-form-label {
width: 150px;
color: #000;
text-align: left;
}
.sign-up-form {
......@@ -1672,8 +1673,8 @@ label {
}
.attention {
color: red;
margin-left: 190px;
color: Grey;
margin-left: 265px;
text-align: left;
}
......
src/main/resources/static/js/login.js
View file @ 8d96fbe2
......@@ -36,6 +36,7 @@ $('#ok-btn').on('click', function(){
}).done(function(response, textStatus, jqXHR ) {
$('.js-modal').fadeOut();
}).fail(function(jqXHR, textStatus, errorThrown) {
alert("Failed.");
//alert("Failed.");
});
});
\ No newline at end of file
});
src/main/resources/templates/login.html
View file @ 8d96fbe2
......@@ -11,11 +11,21 @@
<link rel="icon" href="images/favicon.png" th:href="@{/images/favicon.png}"/>
<link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/>
<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]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
$(function(){
jQuery("#form_1").validationEngine();
});
/*]]>*/
</script>
</head>
<body>
......@@ -88,43 +98,46 @@
<div class="modal js-modal">
<div class="modal__bg js-modal-close"></div>
<div class="modal__content">
<form id="form_1">
<div class="sign-up-form">
<p id="sign-up-text">Sign Up</p>
<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 class="sign-up-form">
<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>
</div>
<div class="sign-up-form">
<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>
</div>
<div class="sign-up-form">
<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>
</div>
<div class="sign-up-form">
<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 class="sign-up-form">
<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>
<button class="js-modal-sign-up" id="ok-btn">Ok</button>
<button class="js-modal-close" id="close-btn">Close</button>
</div>
</form>
</div><!--modal__inner-->
</div><!--modal-->
<!-- モーダル用 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- 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/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