Question

I got stuck on a very simple Question,

I have a form in that order:

• email,
• pw1,
• pw2,
• username (which is optional)

The whole form is validated with .validate() and it´s working awesome and shows up nice error messages etc..

The one thing I couldn’t achieve is : I want the Username-textfield to only show up if email, pw and pw2`s values are valid

I have the username input inner a
div class=”reguser” style=”display:none;”

I tried the .valid() method like :

if ($('#passwort').valid() && $('#passwort2').valid() && $('#email').valid()) {
    $('.reguser').show();
};

that doesnt work at all, all fields asked if .valid() are initially highlighted with the error message now and if they are getting valid by putting valid value in, .reguser doesn’t show up

also tried to catch the class valid, but i guess i need to do this on an event like onfocusout or so

if ($('#passwort').hasClass('.valid') && $('#passwort2').hasClass('.valid') && $('#email').hasClass('.valid')) {
    $('.reguser').show();
};

Has anyone a hint for me ? I´m searching the Internet for hours and hours and not making progress

Answer 1

Since all required fields are needed to show the username field, you can check if the whole form is valid:

$('#formId :input').on('blur', function(){
    if($('#formId').valid())
    {
        $('.reguser').show();
    }
});

You can change blur to the event you want.