JSFiddle - React, Tailwind, and code Playground

by ohcibi

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/black-tie/jquery-ui.css">
<form id="form1">
    <input type="text" id="name" name="name" />
    <input type="text" id="pinCode" name="pinCode" />
    <input type="submit" value="Go" />
</form>
<div id="dialog-confirm">Confirm!</div>

CSS

#dialog-confirm {
    display: none;
}

JavaScript

$(function () {

    $("#form1").validate({
        rules: {
            pinCode: {
                required: true,
                digits: true,
                maxlength: 9,
                min: 1
            }
        },
        messages: {
            pinCode: {
                required: "Please enter pin code",
                digits: "Please enter a valid pin",
                maxlength: "pin code must be less than 10 digit",
                min: "zero can not be a pin code"
            }
        },
        invalidHandler: function (form, validator) {
            $(document).scrollLeft(300);
            $(document).scrollTop(100);
            var posX = $(document).clientWidth / 2;
            var posY = $(document).scrollTop() + ($(document).clientHeight / 2);
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 180,
                modal: true,
                position: [posX, posY],
                buttons: {
                    "Ok": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

    });
});