@Atatra
Posted
Well done, looks clean! :)
Seems like I'm not the only one who tried to factorize the inputs into a single one. Though your code is cleaner than mine. Your CSS solution for hidding/showing the error is interesting.
-
But maybe you could hide the error messages before the user submits the form? It would make the user experience a bit better I think. But you would need to add some javascript.
-
I'm not acquainted with VueJS so it's probably not true (though it doesn't seem so different from NextJS). It looks like you could do it with
@submitkeyword in your<form>if you correctly named your inputs (see Using Custom Validation . Actually, I did something quite similar here Line 103. My code is ugly, but the idea is the same I suppose. So in your@sumbit, before calling calculateMortage(), or inside, you could check if the infos are empty string/null. Then update yourformErrorsaccordingly. Finally, you will have to extract this array just like you did in MortgageResults. Well, I don't know if there's a simpler solution, or one that only uses HTML+CSS.
(I'm still trying to wrap my head around how you managed to change the radio button's color? It looks so good!!)
Happy coding! :)
@dylan-dot-c
Posted
@Atatra hey! Thanks for the review. I see we both used TailwindCSS for the styling, i did the hide/show part with selectors in css and how i did the input. So basically if the input field is invalid, make the p.error element visible
input[type='radio']:invalid {
& ~ .error {
display: block;
margin: 0;
}
}
But my main objective was to try and depend on html and CSS for my validation instead of using JS, didn't turn out how I wanted it so I might have to use JS instead. I guess I was trying to not complicate things by using js, I see it most places where people do something complex in js that could be done with proper html/css.
Like even for the multi-step form, thats how I did the validation using zustand and custom validators and keeping my errors state in an array/object. ANd as you can see I was planning to do the same for vue but I just have an used formErrors state lol.
<label
for="interest"
class="border p-4 pl-16 mb-12 relative"
:class="{ 'border-lime bg-lime bg-opacity-10': data.formInfo.type == 'interest' }">
<input
type="radio"
name="type"
value="interest"
id="interest"
class=""
v-model="data.formInfo.type"
required
/>
<span class="radio"><span class="radio--circle"></span></span>
Interest
<p class="error hidden text-red absolute top-16 left-0">This field is required</p>
</label>
That is the html that I used so I just wrapped the whole info with a label and for the css(non-tailwind part)
input[type='radio']:checked ~ .radio {
border-color: hsl(61, 70%, 52%);
& .radio--circle {
display: inherit;
background-color: hsl(61, 70%, 52%);
width: 10px;
height: 10px;
border-radius: 50%;
}
}
.radio {
display: grid;
place-items: center;
position: absolute;
left: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid rgb(138, 138, 148);
}
And I also added a little opacity of the lime color for the bg of the label.
So thats what I did, also I realized you used a custom radio but you would also have to hide the default one, either with opacity or display none. And due to that it wont look too perfect.
PS: I was a react guy(might still be) but react makes me write some nasty looking code so yh... trying out vue and its cool so far. Only issue I have is dealing with some global state, like I know in react how when state changes the component re-renders and same for any components that use the state, so in react the state is very reactive but not so easily reactive with vue(refs / reactive).
@Atatra
Posted
@dylan-dot-c Thanks so much for the thorough answer, it makes everything a lot clearer! I'll keep in mind your solution when I'll have to deal with radios next time.
I know absolutely nothing about Vue so it's interesting to hear the differences between the two. Me too, I tend to write nasty code in React - though I'm still a beginner anyway. My last real project (a multistep form builder and previewer) was so badly written that it made me want to cry haha. I don't know if it will get better, but I'll might consider trying out Vuejs too then.
@dylan-dot-c
Posted
@Atatra Just updated the validation, had to do it manually, not sure if its exact but take a look if you have the time
