Subversion-Projekte lars-tiefland.marine-sales.de

Revision

Blame | Letzte Änderung | Log anzeigen | RSS feed 

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>jQuery validation plug-in - dynamic forms demo</title>
        <link rel="stylesheet" media="screen" href="css/screen.css">
        <script src="../lib/jquery.js"></script>
        <script src="../dist/jquery.validate.js"></script>
        <script>
        // only for demo purposes
        $.validator.setDefaults({
                submitHandler: function() {
                        alert("submitted!");
                }
        });
        $.validator.messages.max = jQuery.validator.format("Your totals mustn't exceed {0}!");

        $.validator.addMethod("quantity", function(value, element) {
                return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]);
        }, "Please select both the item and its amount.");

        $().ready(function() {
                $("#orderform").validate({
                        errorPlacement: function(error, element) {
                                error.appendTo(element.parent().next());
                        },
                        highlight: function(element, errorClass) {
                                $(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass);
                        }
                });

                var template = jQuery.validator.format($.trim($("#template").val()));

                function addRow() {
                        $(template(i++)).appendTo("#orderitems tbody");
                }

                var i = 1;
                // start with one row
                addRow();
                // add more rows on click
                $("#add").click(addRow);

                // check keyup on quantity inputs to update totals field
                $("#orderform").on("keyup", "input.quantity", function(event) {
                        var totals = 0;
                        $("#orderitems input.quantity").each(function() {
                                totals += +this.value;
                        });
                        $("#totals").attr("value", totals).valid();
                });

        });
        </script>
        <style>
        form.cmxform {
                width: 50em;
        }
        em.error {
                background:url("images/unchecked.gif") no-repeat 0px 0px;
                padding-left: 16px;
        }
        em.success {
                background:url("images/checked.gif") no-repeat 0px 0px;
                padding-left: 16px;
        }
        form.cmxform label.error {
                margin-left: auto;
                width: 250px;
        }
        form.cmxform input.submit {
                margin-left: 0;
        }
        em.error {
                color: black;
        }
        #warning {
                display: none;
        }
        select.error {
                border: 1px dotted red;
        }
        </style>
</head>
<body>
<h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
<div id="main">
        <textarea style="display:none" id="template">
                <tr>
                        <td>
                                <label>{0}. Item</label>
                        </td>
                        <td class='type'>
                                <select name="item-type-{0}">
                                        <option value="">Select...</option>
                                        <option value="0">Learning jQuery</option>
                                        <option value="1">jQuery Reference Guide</option>
                                        <option value="2">jQuery Cookbook</option>
                                        <option vlaue="3">jQuery In Action</option>
                                        <option value="4">jQuery For Designers</option>
                                </select>
                        </td>
                        <td class='quantity'>
                                <input size='4' class="quantity" min="1" id="item-quantity-{0}" name="item-quantity-{0}">
                        </td>
                        <td class='quantity-error'></td>
                </tr>
        </textarea>
        <form id="orderform" class="cmxform" method="get" action="foo.html">
                <h2 id="summary"></h2>
                <fieldset>
                        <legend>Example with custom methods and heavily customized error display</legend>
                        <table id="orderitems">
                                <tbody>
                                </tbody>
                                <tfoot>
                                        <tr>
                                                <td colspan="2">
                                                        <label>Totals (max 25)</label>
                                                </td>
                                                <td class="totals">
                                                        <input id="totals" name="totals" value="0" max="25" readonly="readonly" size='4'>
                                                </td>
                                                <td class="totals-error"></td>
                                        </tr>
                                        <tr>
                                                <td colspan="2">&nbsp;</td>
                                                <td>
                                                        <input class="submit" type="submit" value="Submit">
                                                </td>
                                        </tr>
                                </tfoot>
                        </table>
                </fieldset>
        </form>
        <button id="add">Add another input to the form</button>
        <h1 id="warning">Your form contains tons of errors! Please try again.</h1>
        <p><a href="index.html">Back to main page</a>
        </p>
</div>
</body>
</html>