@savvystrider Well done. I will recommend followings:
Logical errors in form validation.
- No errors for name and number are submitted empty.
- No error if number field is invalid.
- When space apears after entering each 4 digit in cardNumber, there is a late.
Validation problems solution.
- HTML: Add an span element after each input with error class
<span class="error-container"></span>
- CSS:
.error {
color: var(--input-errors);
font-size: 12px;
display: none;
}
- JS:
- select those errorContainers
const errorsContainers = form.querySelectorAll("span.error-container")
- change cardNumber event from 'keyup' to 'input'
cardNumber.addEventListener("input", function(e) {...}
- modify the submit event handling function
e.preventDefault();
let error = false; // global flag to keep track of any input error so that we can prevent final submission
inputs.forEach((input, index) => { // for each input fields check for empty error
if (input.value === "") { // display error and set global flag to true
errorsContainer[index].textContent = "Can't be blank";
errorsContainer[index].style.display = "block";
error = true;
} else { // remove previusly set error.
errorsContainer[index].textContent = "";
errorsContainer[index].style.display = "none";
}
})
if (cardNumber.value.search(/[^\d\s]/) !== -1) { // check cardNumber has any format error and display erros
errorsContainer[1].innerHTML = "invalid format";
errorsContainer[1].style.display = "block";
error = true;
} else { // remove previusly set error.
errorsContainer[1].textContent = "";
errorsContainer[1].style.display = "none";
}
if (error) return; // return if error is found in any input
// if no errors show success page
form.style.display = "none";
document.getElementById("success-container").style.display = "block";
Layout problem solution
You have to position the card-front and card-back images absolutely inrelation to the card-container.
This is a great article for layout. Understanding Layout
In short change the following in css:
.card-container {
position: relative;
}
.front {
position: absolute; /* remove self from the regular element flow. position according
to the parent which was positioned (in this case .card-container) otherwise position
according to body */
top: 50%; /* the distance between .card-container top and
.front top is 5% of the .card-container width */
left: 5%; /* the distance between .card-container left and
.front top is 5% of the .card-container width */
z-index: 1;
}
.back {
position: absolute;
top: 5%; /* the distance between .card-container top and
.back top is 5% of the .card-container width */
right: 5%; /* the distance between .card-container right and
.back top is 5% of the .card-container width */
}
Similarly card front and back content should be positioned.Also fix those html warning and errors given by frontendmentor.