Merge pull request #86 from danieldupriest/fix-input-fields

Fix input fields
This commit is contained in:
Logan Miller 2019-02-16 12:11:47 -08:00 committed by GitHub
commit 8da8e55279
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 5 deletions

View file

@ -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>

View file

@ -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();

View file

@ -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>

View file

@ -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>

View file

@ -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>