jQuery Validation + Dialog

Question

I'm building jquery validation and I need to support it with displaying Dialog.

There are multiple selection/inputs to check against, so as it is now I get multiple dialogs displayed all at once, and would like to display only one dialog with the list of fields that has not been validated (error).

HTML:

<form method='post'>
    input 1: <input type="text" id="input1" name="input1" class="in1"><br>  
    input 2: <input type="text" id="input2" name="input2" class="in2"><br>  
    input 3: <input type="text" id="input3" name="input3" class="in3"><br>
    <input type="submit"  value="Submit" id="submit" name="submit">         
</form>

<div id="dialog-input1" title="Error" class="val-noshow">Empty Input 1</div>
<div id="dialog-input2" title="Error" class="val-noshow">Empty Input 2</div>
<div id="dialog-input3" title="Error" class="val-noshow">Empty Input 3</div>

jQuery:

$(document).ready(function () {

    $("#submit").click(function () {

        var input1 = $('#input1').val();
        var input2 = $('#input2').val();
        var input3 = $('#input3').val();

        var valid = true;

        if (input1 == "")
        {
            $('.in1').removeClass('valid').addClass('error');
            valid = false;
            $(function () {
                $("#dialog-input1").dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        }
        else {
            $('.in1').removeClass('error').addClass('valid');
        }

        if (input2 == "")
        {
            $('.in2').removeClass('valid').addClass('error');
            $(function () {
                $("#dialog-input2").dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
            valid = false;
        }
        else {
            $('.in2').removeClass('error').addClass('valid');
        }

        if (input3 == "")
        {
            $('.in3').removeClass('valid').addClass('error');
            $(function () {
                $("#dialog-input3").dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
            valid = false;
        }
        else {
            $('.in3').removeClass('error').addClass('valid');
        }

        return valid;

    });
});

CSS:

.val-noshow { display: none; }
.error { border: 1px #F00 solid; color: #F00;}
.valid { border: 1px #979 solid; }

Working sample jsfiddle: https://jsfiddle.net/nitadesign/sd8Lk9dv/

How I can achive that?

Iceman · Accepted Answer · 2016-07-27 11:12:08Z

Based on Srikanth's answer but some edits because there are some mistakes there:

$("#submit").click(function(event) {

    $("#dialog-input").html("");

    var input1 = $('#input1').val();
    var input2 = $('#input2').val();
    var input3 = $('#input3').val();

    var valid = true;

    if (input1 == "") {

      $('.in1').removeClass('valid').addClass('error');
      $("#dialog-input").append("<p>Empty Input 1</p>");

      valid = false;
    } else {
      $('.in1').removeClass('error').addClass('valid');
    }

    if (input2 == "") {

      $('.in2').removeClass('valid').addClass('error');
      $("#dialog-input").append("<p>Empty Input 2</p>");

      valid = false;
    } else {
      $('.in2').removeClass('error').addClass('valid');
    }

    if (input3 == "") {

      $('.in3').removeClass('valid').addClass('error');
      $("#dialog-input").append("<p>Empty Input 3</p>");

      valid = false;
    } else {
      $('.in3').removeClass('error').addClass('valid');
    }

    if (!valid) {

      $(function() {
        $("#dialog-input").dialog({
          modal: true,
          buttons: {
            Ok: function() {
              $(this).dialog("close");
            }
          }
        });
      });
    }

    return valid;
  });

Shrikant Mavlankar · Accepted Answer · 2016-07-22 08:02:22Z

Change your jquery like this.

<script>
$(document).ready(function () {

    $("#submit").click(function (event) {

        event.preventDefault();            
        $("#dialog-input").html("");

        var input1 = $('#input1').val();
        var input2 = $('#input2').val();
        var input3 = $('#input3').val();

        var valid = true;

        if (input1 == ""){

            $('.in1').removeClass('valid').addClass('error');
            $("#dialog-input").append("<p>Empty Input 1</p>");

            valid = false;
        }
        else { $('.in1').removeClass('error').addClass('valid'); }

        if (input2 == "") {

            $('.in2').removeClass('valid').addClass('error');
            $("#dialog-input").append("<p>Empty Input 2</p>");

            valid = false;
        }
        else { $('.in2').removeClass('error').addClass('valid'); }

        if (input3 == "") {

            $('.in3').removeClass('valid').addClass('error');
            $("#dialog-input").append("<p>Empty Input 3</p>");

            valid = false;
        }
        else { $('.in3').removeClass('error').addClass('valid'); }

        if( !valid){ 

            $(function () {
                $("#dialog-input").dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        }
        else{ return valid; }
    });
});
</script>

Since we are appending all the error message in single container so keep single div like this.

<div id="dialog-input" title="Error" class="val-noshow"></div>

thanks, that is fine but the idea is to have list of not validated inputs so it will check all the values first and then script will list the not validated ones in dialog and in the same time highlight them all in red
You want single dialog which includes all the inputs which are empty or not validated? In short single dialog with error message of all the input box? Am I right?
Also can you please update jsfiddle completely, it does not have entire code you mentioned here.
validation is a bit more complicated so for the sake of keeping it short and clear let say by validated I mean not empty. You are right all inputs that are empty should be listed in dialog box and highlighted.
I've modified my answer, Please check it out and let me know if that is what you were looking for

Collectives™ on Stack Overflow

jQuery Validation + Dialog

2 Answers 2

Comments

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Related