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…
Reference in a new issue