Only one live error message shows at a time, for validation on sign-up page

[tracey-le]

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 :)

[tracey-le]

Oh, or does $('.error').html("") make all the tags with class=error have blank text? 😮🤔 I'll look into it ☺️😄

[tracey-le]

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 :)

[tracey-le]

(Going to leave this for now, feel free to take a look 😃)

[tracey-le]

Thanks @lyneca 👍

[lyneca]

Calls to .find() can return more than one object

[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?

[tracey-le]

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 👍

[tracey-le]

I have an idea for this, working on it now 😃

[tracey-le]

Okay, I think the fix seems to be working for now at least 😃

Multiple live validation error messages:

[tracey-le]

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 😃

[tracey-le]

Hmm it seems just to get one parent element? 🤔 I just had a quick check here https://api.jquery.com/parent/

[tracey-le]

Oh, okay I see that .find() looks for descendants 😮 https://api.jquery.com/find/

[tracey-le]

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 😊