<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style media="screen">
        body {
            font-family: "Avenir Next", Arial, sans-serif;
        }
        .row {
            margin-bottom: 4px;
        }
        #errors {
            padding-top: 10px;
        }
    </style>
    <script src="../js/jquery-1.12.0.min.js" type="text/javascript"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript"></script>

    <script src="../FormValidator.js" type="text/javascript"></script>
    <script src="custom_validator.js" type="text/javascript"></script>

    <link rel="stylesheet" href="../css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
    <!-- <link rel="stylesheet" href="../css/theme.default.css" media="screen" title="no title" charset="utf-8"> -->
    <link rel="stylesheet" href="../css/theme.bootstrap.css" media="screen" title="no title" charset="utf-8">
</head>

<body>
    <div class="container">
        <div class="page-header">
            <h1>
                Demo (custom validator)
                <small>Create your own</small>
            </h1>
        </div>

        <form class="form-horizontal">
            <div class="form-group">

            </div>
        </form>

        <div class="row">
            <div class="col-xs-12" style="border-bottom: 1px solid #eee; margin-bottom: 20px;"></div>
        </div>

        <form id="my_form" class="form-horizontal" data-fv-error-targets="self">
            <div class="form-group">
                <div class="col-xs-10 col-xs-offset-2">
                    Enter your product key. It looks like XXXX-XXXX-XXXX-XXXX.
                    <br>
                    <br>
                </div>
                <label for="field" class="col-xs-2 control-label">Product key</label>
                <div class="col-xs-8">
                    <input class="form-control input-lg" type="text" data-fv-validate="product_key" data-fv-name="product key">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-offset-2 col-xs-3">
                    <button class="btn btn-primary" type="button">
                        Check product key
                    </button><br><br>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12" style="border-bottom: 1px solid #eee; margin-bottom: 20px;"></div>
            </div>
            Relevant code:
<pre>&lt;form id=&quot;my_form&quot; data-fv-error-targets=&quot;self&quot;&gt;
    &lt;input type=&quot;text&quot; data-fv-validate=&quot;product_key&quot; data-fv-name=&quot;product key&quot;&gt;
&lt;/form&gt;</pre>
        </form>
    </div>
</body>

</html>
