jQuery: validate Italian IBAN

by gabrieleromanato

HTML

<form action="#" method="post">
    <div>
        <input type="text" name="iban" id="iban" />
        <input type="submit" name="submit" id="submit" value="Test">
    </div>
</form>

CSS

form {
    margin: 1em;
    font: 100% Arial, sans-serif;
}

*:focus {outline-style: none;}

#iban {
    font: 1em Arial, sans-serif;
    width: 15em;
    padding: 0.4em;
    border: 1px solid #ccc;
    background: #fcfcfc;
    border-radius: 12px;
}

#submit {
    font: 1em Arial, sans-serif;
    padding: 0.4em;
    width: 5em;
    margin-left: 1em;
    background: #000;
    color: #fff;
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

div.error {
    width: 15em;
    padding: 0.4em;
    background: #f34545;
    border: 1px solid #f60;
    border-radius: 12px;
    margin-top: 1em;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

JavaScript

$('form').submit(function(e) {
    e.preventDefault();
    if ($('div.error').length) {
        $('div.error').remove();
    }
    var iban = $('#iban').val();
    var reg = /^IT\d{2}[ ][a-zA-Z]\d{3}[ ]\d{4}[ ]\d{4}[ ]\d{4}[ ]\d{4}[ ]\d{3}|IT\d{2}[a-zA-Z]\d{22}$/;

    if (!reg.test(iban)) {
        $('<div class="error"/>').text('Not a valid IBAN').
        appendTo($(this));
    } else {
        alert('Correct IBAN');
    }
});