jQuery 验证 + 对话框

Question

我正在构建 jquery 验证，我需要通过显示对话框来支持它。

有多个选择/输入要检查，所以现在我一次显示多个对话框，并且只想显示一个对话框，其中包含尚未验证的字段列表（错误）。

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; }

工作示例 jsfiddle：https://jsfiddle.net/nitadesign/sd8Lk9dv/

我怎样才能做到这一点？

Answer 1

基于 Srikanth 的回答，但由于存在一些错误而进行了一些修改：

$("#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;
  });

Answer 2

像这样改变你的 jquery。

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

由于我们将所有错误消息附加到单个容器中，所以保持单个 div 像这样。

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