HTML5 VALIDATION TEST

src/main/webapp/WEB-INF/jsp/nlib/board/insertQnAForm.jsp

@@ -32,6 +32,66 @@
 <%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
 <c:set var="pageTitle">묻고답하기 - 글쓰기</c:set>
 
+<style>
+input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+
+input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:required {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+
+</style>
+
+<form>
+  <label for="choose">Would you prefer a banana or cherry?</label><br/>
+  <input id="choose1" name="i_like1" ><br/>
+  <input id="choose2" name="i_like2" required><br/>
+  <input id="choose3" name="i_like3"><br/>
+  <input id="email" name="email" required pattern="[Bb]anana"> * Banana or banana<br/>
+   <div>
+    <label for="number">How many would you like?</label>
+    ==> <input type="number" id="number" name="amount" value="" min="1" max="10" required oninvalid="InvalidMsg(this, '잘 입력해요.');">
+    <valid-msg>
+    Good
+    </valid-msg>
+    <invalid-msg>
+    Good
+    </invalid-msg>
+  </div>
+  <button>Submit</button>
+</form>
+
+<script>
+function InvalidMsg(textbox, msg) {
+	alert("invalid");
+	if (textbox.value === '') {
+        textbox.setCustomValidity
+              (msg);
+    } else if (textbox.validity.typeMismatch) {
+        textbox.setCustomValidity
+              ('Please enter an email address which is valid!');
+    } else {
+        textbox.setCustomValidity('');
+    }
+
+    return true;
+}
+</script>
+
+
 
 
 <h3>${pageTitle }</h3>
@@ -67,16 +127,18 @@
 </table>
      
 <input type="button" name="btnNew" id="btnNew" value="확인" 
-    onclick="javascript:location.href='submit();" />
+    onclick="javascript:fileUploadNow();" />
 <input type="button" name="btnNew" id="btnNew" value="취소" 
     onclick="javascript:location.href='${pageContext.request.contextPath}/board/listQnAs.do';" />
     
 
 </form:form>
 
-
 <!-- File Upload -->
-<script src="/js/fileupload/dropzone.js"></script>
+<link rel="stylesheet" type="text/css" href="/nlib/js/fileupload/dropzone-nlib.css" />
+<!-- <link rel="stylesheet" type="text/css" href="/nlib/js/fileupload/basic-nlib.css" /> -->
+<link rel="stylesheet" type="text/css" href="/nlib/js/fileupload/style-nlib.css" />
+<script src="/nlib/js/fileupload/dropzone-nlib.js"></script>
 
 <div id="dropzone">
     <form action="${pageContext.request.contextPath}/fileupload/uploadFile.do" 
@@ -88,28 +150,13 @@
     </form>
 </div>
 
-<link rel="stylesheet" type="text/css" href="/nlib/js/fileupload/dropzone.css" />
-<link rel="stylesheet" type="text/css" href="/nlib/js/fileupload/basic.css" />
-<link rel="stylesheet" type="text/css" href="/nlib/js/fileupload/style.css" />
-<script type="text/javascript" src="/nlib/js/fileupload/dropzone.js"></script>
 
 <script type="text/javaScript" language="javascript">
 
 Dropzone.options.myDropzone = {
 		  paramName: "file", // The name that will be used to transfer the file
-		  maxFilesize: 2, // MB
-		  acceptedFiles: "image/*,application/pdf,.doc,.docx,.xlsx,.hwp,.ppt",
-		  dictInvalidFileType: "허용된 파일 형식만 올릴 수 있습니다. (이미지, .pdf, .doc(x), .xls(x), .ppt(x), .hwp)",
-		  autoProcessQueue: false,
-		  addRemoveLinks: true,
-		  dictCancelUpload: "DEL",
-		  dictRemoveFile: "취소",
-		  
-		  thumbnailWidth: 50,
-		  thumbnailHeight: 20,
 		  
 		  accept: function(file, done) {
-			  alert("done:" + done);
 			  //alert("file.name=" + file.name);
 		    if (file.name == "justinbieber.jpg") {
 		      done("Naha, you don't.");
@@ -122,7 +169,11 @@ Dropzone.options.myDropzone = {
 		  }
 		};
 		
+function fileUploadNow() {
+    alert("ok");
     
+    Dropzone.processQueue();
+}		
 		
 </script>