הלינקייה: מגזין חודשי למפתחים

רוצה לשמוע על כל האירועים, המדריכים, הקורסים והמאמרים שנכתבו החודש ?
הלינקייה הינו מגזין חופשי בעברית שמשאיר אותך בעניינים.
בלי ספאם. בלי שטויות. פעם בחודש אצלך בתיבה.

Dojo Form Validation

<html>
    <head>
        <title>Look Ma' no tables</title>
        <link rel="stylesheet" href="forms.css" />
        <script src="dojo.js"></script>
        <script src="forms.js"></script>
    </head>
 
    <body>
        <h1>User Registration Form</h1>
        <form>
 
            <div validation="required">
                <label for="fullname">Name:</label>
                <input type="text" name="fullname" class="txt" />
                <span class="errortext">Missing user name</span>
            </div>
 
            <div validation="fail">
                <label for="email">Email Address:</label>
                <input type="text" name="email" class="txt" />
                <span class="errortext">Muhahaha</span>
            </div>
 
            <div>
                <label for="password1">Password:</label>
                <input type="password" name="password1" class="txt" />
            </div>
 
            <div>
                <label for="password2">Confirm Password:</label>
 
                <input type="password" name="password2" class="txt" />
            </div>
 
            <div>
                <label for="level">Membership Type:</label>
                <select name="level">
                        <option value="silver">Silver</option>
                        <option value="gold">Gold</option>
 
                </select>
            </div>
            <div>
                <input type="submit" name="btnSubmit" value="Sign Up!"
                class="btn" />
            </div>
        </form>
    </body>
</html>
h1 {
    font: 1.2em Arial, Helvetica, sans-serif;
}
 
input.txt {
    color: #00008B;
    background-color: #E3F2F7;
    border: 1px inset #00008B;
    width: 200px;
}
 
input.btn {
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px outset #00008B;
}
 
form {
    width: 400px;
}
 
form div {
    clear: left;
    margin: 0;
    padding: 0;
    padding-top: 0.6em;
}
 
form div label {
    float: left;
    width: 150px;
    font: bold 0.9em Arial, Helvetica, sans-serif;
}
 
form div span.errortext {
    visibility: hidden;
    color: red;
}
 
form div.error input {
    border: 2px solid red;
}
 
form div.error span {
    visibility: visible;
}
 
(function () {
    console.log('forms.js');
 
    var validators = {
        required : function(input) {
                var val = dojo.attr(input, 'value');
 
                if ( val && val.length > 0 ) {
                    return true;
                } else {
                    return false;
                }            
            },
 
        fail : function(input) {
            return false;
        }
    };
 
    dojo.ready(function() {
        console.log('dojo ready');
        var fields = dojo.query('form div');
 
        fields.onchange(function(ev) {
            console.log('got event');
            var row = ev.currentTarget,
                action = dojo.attr(row, 'validation'),
                input  = ev.target,
                pass;
 
            var func = validators[action];        
 
            console.dir(row);
            console.log('func = ' + func + '; action = ' + action);
            if ( func !== undefined ) {
                pass = func(input);
 
                if ( ! pass ) {
                    dojo.addClass(row, 'error');
                } else {
                    dojo.removeClass(row, 'error');
                }
 
            }
        });
    });
 
 
}());