Only one live error message shows at a time, for validation on sign-up page
Closed this issue · 13 comments
Example: If you type a username that's too short, you get an error message as soon as you leave the field. Then if you move onto the nickname field and type a nickname that's too short and lose focus on the field, you get an error message for the nickname too.
Expected behaviour: both error messages should stay since they're relevant still.
What happens: the error message for the username disappears while the error message for nickname is still there.
I think it has something to do with when we make .text('error message etc ') appear in the <p>'s with class="error" — I don't know if it affects <p>'s that have already had their text changed or if it makes them blank.
Here is part of the code for the username field:
Also I don't think having this repeated at the start of every blur event is a good idea hehe, it also might be affecting things:
var $form = $('form.sign-in');
$('.error').html("");
I'm not quite sure what the second line does 😊 does it find a new tag with class="error" each time? Anyway, just recording some ideas :)
Oh, or does $('.error').html("") make all the tags with class=error have blank text? 😮🤔 I'll look into it
Okay, just tested replacing the empty string in $('.error').html("") with something random — like $('.error').html("food") — and it did change all the error texts to food :)
(Going to leave this for now, feel free to take a look 😃)
Calls to .find() can return more than one object
I don't know much about the code, but does $input.parent().find() contain just the element you want to change, or both error fields?
Ooh thank you about .find() 😄
I think so far it's been only one error field at a time that changes so it looks like $input.parent().find() just contains one field from what I can see...? but I'm not too sure. I'll take a look tomorrow 👍
I have an idea for this, working on it now 😃
Okay, I think the fix seems to be working for now at least 😃
Multiple live validation error messages:
lyneca:
I don't know much about the code, but does$input.parent().find()contain just the element you want to change, or both error fields?
t1-tracey:
I think so far it's been only one error field at a time that changes so it looks like$input.parent().find()just contains one field from what I can see...? but I'm not too sure. I'll take a look tomorrow 👍
I'm just gonna take a look at this that Luke said earlier 😃
Hmm it seems just to get one parent element? 🤔 I just had a quick check here https://api.jquery.com/parent/
Oh, okay I see that .find() looks for descendants 😮 https://api.jquery.com/find/
The hierarchy for the signup page is like this:
So from the jQuery API, it looks like that this —
gets the parent of the input element that's stored in the $input var, which will be a <div>. Then it looks for descendants of the <div> that are of class error, which will be the <p>. And its text will be set to whatever.
I didn't know that before 😊