Modal window in the click event [closed]

-2

Hello everyone, I have a problem, I have to make a button have "2 functions" in fact everything is working correctly, so my client wants the following ...

When the user clicks register and is all fields correct, it 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 the button it shows a message in the label itself.

Here is my modal;               / * java modal window services * /           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 is the button that calls the modal if everything is completed right:      

Well this is so if someone knows another solution or if you can solve it yourself.   Does anyone know how I should do it?

    
asked by anonymous 26.04.2014 / 01:11

1 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.

The steps to follow are:

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

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

2- Go through one by one and see if they are populated. Here I have to guess, as there is a lack of information in your question. The code below filters the elements and leaves an array with only the elements that are not filled:

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

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

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(' ,'));
}
    
26.04.2014 / 08:36