Pastebin

jquery form validation example

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- use .min.js for minified version -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<style type="text/css">
body                    { font-family: sans-serif; font-size: 10pt; }
div.form div.item       { display: block; line-height: 25px; }
div.form div.even       { background-color: #eeeeee; }
div.form div.odd        { background-color: #ffffff; }
div.form div.left       { display: block; float: left; width: 20%; }
div.form div.right      { display: block; float: left; width: 80%; }
div.form div.clear      { clear: both; }
div.form ul             { margin: 5px 0 0; }
div.form input          { border: 1px solid; }
div.form input.error    { border-color: #ff0000; background-color: #ffcccc; }
</style>
</head>

<body>
<div class="form">
    <form action="" id="form_1" method="post">
        <div id="messages"></div>
        <div class="item even">
            <div class="left"><label for="text_1">text field</label></div>
            <div class="right"><input type="text" name="text_1" id="text_1" value="" class="validate-text" /></div>
            <div class="clear"><!-- clear --></div>
        </div>
        <div class="item odd">
            <div class="left"><label for="text_2">text field</label></div>
            <div class="right"><input type="text" name="text_2" id="text_2" value="" class="validate-text" /></div>
            <div class="clear"><!-- clear --></div>
        </div>
        <div class="buttons">
            <button type="submit">submit</button>
        </div>
    </form>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('div.form').on('focus', 'input.validate-text', function(e) {
        // hide previous errors
        $(this).parent().find('.errors').slideUp(function() {
            $(this).remove();
        });
    });
    $('div.form').on('blur', 'input.validate-text', function(e) {
        // show new errors
        if ($(this).val() === 'test') {
            // unflag as error
            $(this).removeClass('error');
        } else {
            // flag as error
            $(this).addClass('error');
            if ($(this).parent().find('.errors').length == 0) {
                $html = $('<div class="errors"><ul><li>input is not equal to &quot;test&quot;</li></ul></div>').hide();
                $(this).parent().append($html);
                $html.slideDown();
            }
        }
    });
    $('#form_1').submit(function(e) {
        // trigger validation events
        $('input').trigger('blur');

        // check if we have errors
        if ($('#form_1 .error').length > 0) {
            e.preventDefault();
            $('#messages').html('<p>one or more fields still contain errors</p>');
        }
    });
});
//]]>
</script>
</body>
</html>