Как сделать, чтобы после успешной валидации один блок скрывался, а другой показывался?

Question

[DimaPolishuk]

<form class="row subscribe-form">
                        <div class="col-sm-6 col-md-4 col-md-offset-3 row-input">
                            <input class="form-control-subscribed" type="email" name="" value=""
                                   placeholder="Enter your email" required>
                        </div>
                        <div class="col-xs-12 col-sm-2 subscribe-button">
                            <input class="btn-subscribed" type="submit" name="" value="SIGN UP">
                        </div>
                    </form>

Есть данная форма, как сделать чтобы при клике на "SIGN UP", если валидация прошла успешно, эту форму скрыть и показать данный блок

<div class="subscribedSuccess">
                    <img class="imageSubsribed" src="/wp-content/themes/ohl/img/subscribeMessage.svg">
                    <div class="col-md-8 col-md-offset-2">
                        <p>Thanks! We hope you enjoy our updates.</p>
                    </div>
                </div>

Answer 1

[he he]

$('.subscribe-form').on('click', '.btn-subscribed', function() {
    var that = $(this);
    if ( validate.. == true ) {
         that.fadeOut('slow'); // that.parent().parent().fadeOut();
         $('.subscribedSuccess').css('display', 'block');
   } 
  });

Что-то типа такого

Comments

[DimaPolishuk]

$(document).ready(function () {

$("#subscribedForm").validate({

rules:{

email:{
required: true,
},

},

messages:{

email:{
required: "Email should consist of @ and .domain. See example: [e-mail]",
},
}

});

$(".btn-subscribed").click(function () {
if ($(".subscribedSuccess").is(":hidden")) {

$(".subscribedSuccess").show();
$(".subscribed").hide();

} else {

$(".subscribedSuccess").hide();

}
return false;
});
});

как мне сделать проверку которую, вы написали выше, вот мой js файл