Fix input field formatting
This commit is contained in:
		
							parent
							
								
									4077bd1d0b
								
							
						
					
					
						commit
						0f53c69e2d
					
				
					 5 changed files with 37 additions and 5 deletions
				
			
		|  | @ -8,6 +8,7 @@ | |||
|     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | ||||
|     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> | ||||
|     <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script> | ||||
|     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> | ||||
|     <link rel="shortcut icon" href="img/favicon.ico"> | ||||
|     <title>Reimbursinator</title> | ||||
| </head> | ||||
|  |  | |||
|  | @ -97,6 +97,18 @@ function createFormGroup(sectionIdStr, field) { | |||
|             formGroup.appendChild(div); | ||||
|             break; | ||||
|         case "date": | ||||
|             input.type = "date"; | ||||
|             input.placeholder = "mm-dd-yyyy"; | ||||
|             if (field.value === "None") { | ||||
|                 input.value = ""; | ||||
|             } else { | ||||
|                 input.value = field.value; | ||||
|             } | ||||
|             input.classList.add("form-control"); | ||||
|             formGroup.appendChild(label); | ||||
|             div.appendChild(input) | ||||
|             formGroup.appendChild(div); | ||||
|             break; | ||||
|         case "string": | ||||
|             input.type = "text"; | ||||
|             input.value = field.value; | ||||
|  | @ -107,7 +119,11 @@ function createFormGroup(sectionIdStr, field) { | |||
|             break; | ||||
|         case "decimal": | ||||
|             input.type = "text"; | ||||
|             input.value = field.value; | ||||
|             if (field.value === "0.00") { | ||||
|                 input.value = ""; | ||||
|             } else { | ||||
|                 input.value = field.value; | ||||
|             } | ||||
|             input.classList.add("form-control"); | ||||
|             input.pattern = "\\d+(\\.\\d{2})?"; | ||||
|             formGroup.appendChild(label); | ||||
|  | @ -116,7 +132,11 @@ function createFormGroup(sectionIdStr, field) { | |||
|             break; | ||||
|         case "integer": | ||||
|             input.type = "number"; | ||||
|             input.value = field.value; | ||||
|             if (field.value === 0) { | ||||
|                 input.value = ""; | ||||
|             } else { | ||||
|                 input.value = field.value; | ||||
|             } | ||||
|             input.classList.add("form-control"); | ||||
|             input.step = 1; | ||||
|             input.min = 0; | ||||
|  | @ -430,6 +450,16 @@ if (newReportForm) { | |||
|     }); | ||||
| } | ||||
| 
 | ||||
| document.addEventListener("input", function(event) { | ||||
|     if (event.target.type === "date") { | ||||
|         if (!moment(event.target.value, "YYYY-MM-DD", true).isValid()) { | ||||
|             event.target.setCustomValidity("Invalid date format"); | ||||
|         } else { | ||||
|             event.target.setCustomValidity(""); | ||||
|         } | ||||
|     } | ||||
| }); | ||||
| 
 | ||||
| document.addEventListener("submit", function(event) { | ||||
|     if (event.target.classList.contains("section-form")) { | ||||
|         event.preventDefault(); | ||||
|  |  | |||
|  | @ -25,7 +25,7 @@ | |||
|                         <form class="form" autocomplete="off"> | ||||
|                             <div class="form-group"> | ||||
|                                 <label for="email">Email:</label> | ||||
|                                 <input class="form-control" id="email" type="email" name="email" required> | ||||
|                                 <input class="form-control" id="email" type="email" name="email" autofocus required> | ||||
|                             </div> | ||||
|                             <div class="form-group"> | ||||
|                                 <label for="password">Password:</label> | ||||
|  |  | |||
|  | @ -8,6 +8,7 @@ | |||
|     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | ||||
|     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> | ||||
|     <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script> | ||||
|     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> | ||||
|     <link rel="shortcut icon" href="img/favicon.ico"> | ||||
|     <title>Reimbursinator</title> | ||||
| </head> | ||||
|  | @ -47,7 +48,7 @@ | |||
|                         <form class="form new-report-form" autocomplete="off"> | ||||
|                             <div class="form-group"> | ||||
|                                 <label for="title">Report title:</label> | ||||
|                                 <input type="text" class="form-control" name="title" id="title"> | ||||
|                                 <input type="text" class="form-control" name="title" id="title" autofocus> | ||||
|                             </div> | ||||
|                             <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#newReportModal">Create</button> | ||||
|                         </form> | ||||
|  |  | |||
|  | @ -25,7 +25,7 @@ | |||
|                         <form class="form signup" autocomplete="off" action="index.html"> | ||||
|                             <div class="form-group"> | ||||
|                                 <label for="email">Email:</label> | ||||
|                                 <input class="form-control" type="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" oninput="validateEmail(this);" required> | ||||
|                                 <input class="form-control" type="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" oninput="validateEmail(this);" autofocus required> | ||||
|                             </div> | ||||
|                             <div class="form-group"> | ||||
|                                 <label for="first_name">First Name:</label> | ||||
|  |  | |||
		Loading…
	
	Add table
		
		Reference in a new issue
	
	 Preston Doman
						Preston Doman