Modal window in event click

Question

Hello guys I’m having a problem, I have to make a button have "2 functions" actually this all working properly, so my client wants the following...

when the user clicks to register and all fields are correct, he registers and shows the success message in a modal, with a button that redirects to home. And if it fails to fill some field and click on the button it shows a message on the same label.

it is all right working just do not know how to do, because in what I tried, it shows the modal whenever you click the button filling or not the fields.

Here is my modal; /* Java modal services window */ var $j = jQuery.noConflict();

      $j(document).ready(function () {
          var nome = $("#txtNome").val();
          var mail = $("#txtEmailC").val();
          var fone = $("#txtFoneC").val();

          if (nome != "" && mail != "" && fone != "") {
            //$(document).ready(function () {

                $("a[rel=modal]").click(function (ev) {
                    ev.preventDefault();

                    var id = $(this).attr("href");

                    var maskHeight = $(document).height();
                    var maskWidth = $(window).width();

                    //colocando cor de fundo
                    $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
                    $('#mask').fadeIn(1000);
                    $('#mask').fadeTo("slow", 0.8);

                    var winH = $(window).height();
                    var winW = $(window).width();

                    $(id).css('top', winH / 2 - $(id).height() / 2);
                    $(id).css('left', winW / 2 - $(id).width() / 2);
                    $(id).fadeIn(2000);
                });

                $('.window2 .close').click(function (ev) {
                    ev.preventDefault();
                    $('#mask').hide();
                    $('.window2').hide();
                });

                $('#mask').click(function () {
                    $(this).hide();
                    $('.window2').hide();
                });
            //});
        }

      });
   </script>

here the button that calls the modal if everything is filled out:

Well it’s like this if someone knows another solution or if you can solve it anyway. Someone knows how to do it?

Answer 1

Since you have not put any code in your question, it is not possible to give an adjusted answer to your code that would be much more useful to you. So I answer more in theory and hope it helps you.

The steps you must follow are:

1 - Create a selector for all fields. For example:

var campos = $('input, texarea');

2- Go one by one and check if they are filled. Here I have to guess, because your question lacks information. The code below filters the elements and leaves an array (list) with only the elements that are not filled in:

campos = campos.filter(function(){ return this.value != ''; });

3 - verify and take action if there are (or are not) unfilled fields, creating a rule if. That is, in the case xdo one thing, in case y do something else. Here I also have to imagine part of your code and I will assume that all inputs have a name. If this is not the case, it must be more specific in the answer.

if (campos.length){ // caso x, "todos os campos estão preenchidos"
    modal.open();
}else{ // caso y, "há campos por preencher"
    alert('Tem campos por preencher! Porfavor verifique os campos ' + campos.map(function(){ return this.name; }).join(' ,'));
}