Add form validation

spring-security-oauth/src/main/webapp/WEB-INF/jsp/editPostForm.jsp

@@ -7,6 +7,7 @@
 <link rel="stylesheet" href="<c:url value="/resources/datetime-picker.css" />">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="<c:url value="/resources/datetime-picker.js" />"></script>
+<script src="<c:url value="/resources/validator.js" />"></script>
 
 </head>
 <body>
@@ -20,7 +21,7 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand" href="info">Schedule to Reddit</a>
+      <a class="navbar-brand" href="<c:url value="/info" />">Schedule to Reddit</a>
     </div>
     
     <p class="navbar-text navbar-right">Logged in as <b><c:out value="${username}"/></b>&nbsp;&nbsp;&nbsp;</p>
@@ -28,9 +29,9 @@
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav">
-        <li><a href="posts">My Scheduled Posts</a></li>
-        <li><a href="post">Post to Reddit</a></li>
-        <li><a href="postSchedule">Schedule Post to Reddit</a></li>
+        <li><a href="<c:url value="/posts" />">My Scheduled Posts</a></li>
+        <li><a href="<c:url value="/post" />">Post to Reddit</a></li>
+        <li><a href="<c:url value="/postSchedule" />">Schedule Post to Reddit</a></li>
       </ul>
       
     </div><!-- /.navbar-collapse -->
@@ -38,31 +39,31 @@
 </nav>
 <div class="container">
 <h1>Edit Scheduled Post</h1>
-<form action="<c:url value="/updatePost/${post.getId()}" />" method="post">
+<form action="<c:url value="/updatePost/${post.getId()}" />" method="post" role="form" data-toggle="validator">
 <div class="row">
 <input type="hidden" name="id" value="${post.getId()}"/>
 <div class="form-group">
     <label class="col-sm-3">Title</label>
-    <span class="col-sm-9"><input name="title" placeholder="title" class="form-control" value="${post.getTitle()}" required/></span>
+    <span class="col-sm-9"><input name="title" placeholder="title" class="form-control" value="${post.getTitle()}" required data-minlength="3"/></span>
 </div>
 <br><br>
 <div class="form-group">
     <label class="col-sm-3">Url</label>
-    <span class="col-sm-9"><input name="url" placeholder="url" class="form-control" value="${post.getUrl()}" required/></span>
+    <span class="col-sm-9"><input name="url" type="url" placeholder="url" class="form-control" value="${post.getUrl()}" required data-minlength="3"/></span>
 </div>
 <br><br>  
 <div class="form-group">
     <label class="col-sm-3">Subreddit</label>
-    <span class="col-sm-9"><input name="sr" placeholder="Subreddit" class="form-control" value="${post.getSubreddit()}" required/></span>
+    <span class="col-sm-9"><input name="sr" placeholder="Subreddit" class="form-control" value="${post.getSubreddit()}" required data-minlength="3"/></span>
 </div>
 <br><br>
 <div class="col-sm-3">
-<input type="checkbox" name="sendreplies" value="true" <c:if test="${post.isSendReplies()=='true'}"> checked </c:if> /> Send replies to my inbox
+<label>Send replies to my inbox</label> &nbsp; <input type="checkbox" name="sendreplies" value="true" <c:if test="${post.isSendReplies()=='true'}"> checked </c:if> /> 
 </div>
 <br><br>
 
 <label class="col-sm-3">Submission Date</label>
-<span class="col-sm-9"><input type="text" name="date" class="form-control" value="${dateValue}"></span>
+<span class="col-sm-9"><input type="text" name="date" class="form-control" value="${dateValue}" readonly></span>
     <script type="text/javascript">
         $(function(){
             $('*[name=date]').appendDtpicker({"inline": true});

spring-security-oauth/src/main/webapp/WEB-INF/jsp/schedulePostForm.jsp

@@ -7,6 +7,7 @@
 <link rel="stylesheet" href="<c:url value="/resources/datetime-picker.css" />">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="<c:url value="/resources/datetime-picker.js" />"></script>
+<script src="<c:url value="/resources/validator.js" />"></script>
 
 </head>
 <body>
@@ -38,30 +39,30 @@
 </nav>
 <div class="container">
 <h1>Schedule Post to Reddit</h1>
-<form action="schedule" method="post">
+<form action="schedule" method="post" role="form" data-toggle="validator">
 <div class="row">
 <div class="form-group">
     <label class="col-sm-3">Title</label>
-    <span class="col-sm-9"><input name="title" placeholder="title" class="form-control" required/></span>
+    <span class="col-sm-9"><input name="title" placeholder="title" class="form-control" required data-minlength="3"/></span>
 </div>
 <br><br>
 <div class="form-group">
     <label class="col-sm-3">Url</label>
-    <span class="col-sm-9"><input name="url" placeholder="url" class="form-control" required/></span>
+    <span class="col-sm-9"><input name="url" type="url" placeholder="url" class="form-control" required data-minlength="3"/></span>
 </div>
 <br><br>  
 <div class="form-group">
     <label class="col-sm-3">Subreddit</label>
-    <span class="col-sm-9"><input name="sr" placeholder="Subreddit" class="form-control" required/></span>
+    <span class="col-sm-9"><input name="sr" placeholder="Subreddit (e.g. kitten)" class="form-control" required data-minlength="3"/></span>
 </div>
 <br><br>
 <div class="col-sm-3">
-<input type="checkbox" name="sendreplies" value="true"/> Send replies to my inbox
+<label>Send replies to my inbox</label> &nbsp;<input type="checkbox" name="sendreplies" value="true"/> 
 </div>
 <br><br>
 
 <label class="col-sm-3">Submission Date</label>
-<span class="col-sm-9"><input type="text" name="date" class="form-control"></span>
+<span class="col-sm-9"><input type="text" name="date" class="form-control" readonly></span>
     <script type="text/javascript">
         $(function(){
             $('*[name=date]').appendDtpicker({"inline": true});

spring-security-oauth/src/main/webapp/WEB-INF/jsp/submissionForm.jsp

@@ -4,6 +4,8 @@
 
 <title>Schedule to Reddit</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+<script src="<c:url value="/resources/validator.js" />"></script>
 
 </head>
 <body>
@@ -35,25 +37,25 @@
 </nav>
 <div class="container">
 <h1>Post to Reddit</h1>
-<form action="submit" method="post">
+<form action="submit" method="post" role="form" data-toggle="validator">
 <div class="row">
 <div class="form-group">
     <label class="col-sm-3">Title</label>
-    <span class="col-sm-9"><input name="title" placeholder="title" class="form-control" required/></span>
+    <span class="col-sm-9"><input name="title" placeholder="title" class="form-control" required data-minlength="3"/></span>
 </div>
 <br><br>
 <div class="form-group">
     <label class="col-sm-3">Url</label>
-    <span class="col-sm-9"><input name="url" placeholder="url" class="form-control" required /></span>
+    <span class="col-sm-9"><input name="url" type="url" placeholder="url" class="form-control" required data-minlength="3"/></span>
 </div>
 <br><br>  
 <div class="form-group">
     <label class="col-sm-3">Subreddit</label>
-    <span class="col-sm-9"><input name="sr" placeholder="Subreddit" class="form-control" required/></span>
+    <span class="col-sm-9"><input name="sr" placeholder="Subreddit (e.g. kitten)" class="form-control" required data-minlength="3"/></span>
 </div>
 <br><br>
 <div class="col-sm-3">
-<input type="checkbox" name="sendreplies" value="true"/> Send replies to my inbox
+<label>Send replies to my inbox</label> &nbsp;<input type="checkbox" name="sendreplies" value="true"/> 
 </div>
 <br><br>
  
@@ -68,7 +70,7 @@
     <img src="http://www.reddit.com/captcha/${iden}" alt="captcha" width="200"/>
     </c:if>
     <br><br>
-    <button type="submit" class="btn btn-primary">Post</button>
+    <span class="col-sm-3"><button type="submit" class="btn btn-primary">Post</button></span>
    </div>
 </form>
 </div>