jQuery Validate demo with popup.

by Naveen Jose

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/vader/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<form>
<div class="container">
<label class="title">Name</label>
<input type="text" class="required" /><br/>
<label class="title">Password</label>
<input type="text" class="required" /><br/>
<input type="submit" value="Enter Site!" />
</div>
<div id="dialog-form" class="error">
<span></span>
</div>
</form>

CSS

.container{
 border: 1px solid #ddd;
margin: 20px;
 padding: 10px;   
    width: 400px;
}
label.title{
    display: inline-block;
    width: 100px;
}
input.error {
    border: 2px solid red;
    background-color: #FFFFD5;
    margin: 0px;
    color: red;
}
label.error{
 display: none;   
}
#dialog-form{
 font-size:12px;   
}

JavaScript

$(document).ready(function() {
    jQuery.validator.messages.required = "";
    $("form").validate({
        invalidHandler: function(e, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = errors == 1 ? 'You missed 1 field. It has been highlighted below' : 'You missed ' + errors + ' fields.  They have been highlighted below';
                $("div.error span").html(message);
                $( "#dialog-form" ).dialog( "open" );
            }
        },
        onkeyup: false
    });
    $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
        title: 'Error Summary'            
    });
});