OE Input Form with Jquery

Uses Javascript and jQuery to do client-side validation.

by mark47

HTML

<br />
<br />
<form class="oe-form">
    <div class="form-label">
        <label>Nom d'utilisateur:</label>
    </div>
    <div class="form-input">
        <input type="text" id="userName" class="input form-name" />
    </div>
    <div class="note note-important" id="usernameNote">Doivent être des lettres minuscule</div>
    <div class="form-label">
        <label for="inputPassword">Mot de passe:</label>
    </div>
    <div class="form-input">
        <input type="password" />
    </div>
    <div class="note note-minor">J'espère que vous ne l'oubliez pas.</div>
    <div class="button-area">
        <button type="submit" class="button-main">Connecter</button>
        <button type="submit" class="button-minor">Changer Mot de Passe</button>
    </div>
</form>

CSS

.oe-form {
    width: 50%;
    margin: 20px auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.form-label {
    font-weight: bold;
    margin: 12px 0 4px 0;
}
.note {
    margin-top: 4px;
}
.note-important {
    color: blue;
    font-style: italic;
}
.note-minor {
    font-size: 11px;
    color: #666
}
.button-area {
    margin-top: 12px;
}
.button-main {
    background-color: blue;
    color: white;
    font-size: 1.2em;
    padding: 4px 12px;
    vertical-align: middle;
}
.button-minor {
    background-color: #e6e6e6;
    color:#444;
    padding: 4px;
    font-size: 0.8em;
}
.input-error {
    background-color: #f2dede
}
.input-success {
    background-color: #dff0d8
}

JavaScript

// Changes any uppercase to lowercase each time a key is pressed.
$("input[type=text]").keyup(function(){
  $(this).val( $(this).val().toLowerCase() );
});

// Example of jquery bind - changes the html of an ID when you move focus off the input box
$("#userName").change( function() {
  console.log('finished that one!');
  $("#usernameNote").html('Bon travail!!!').css('color','green');
});

// Example of jquery bind - check whether the username input has any numbers in it
// To use, comment out the above 2 functions, then add class="input-lower" to the username input box.
$(".input-lower").change( function() {
    var userInput = $(this).val();
    noNumberCheck(userInput);
});

// Function to check whether the username has a number in it. Called from the above function only.
function noNumberCheck(userInput) {
    if ($.isNumeric(userInput)) {
        // It is a number
        console.log('Uhoh, we have a number!');
        $("#userName").addClass('input-error');
        $("#usernameNote").html('Uh Oh, essayez à nouveau.').css('color','red');
    } else {
        // It isn't a number
        console.log('Not a number!!');
        $("#userName").addClass('input-success');
        $("#usernameNote").html('Bon travail!!!').css('color','green');
    };
}