jQuery Validation with Dialog

by Krzysztof Niecikowski

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<form method='post' action='submit.php' >

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-input" title="Error" class="val-noshow"></div>

CSS

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

JavaScript

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