Проверка полей input

[daneyeah]

К делу собственно, что сделать чтобы это "чудо" заработало.
Есть такая вот форма:

<form method="post" action="/components/act/reg.php" class="reg">
    <fieldset class="usr-inp">
        <input type="text" name="login" id="reg-username" placeholder="Login..." class="neutral" onblur="" required  />
        <input type="email" name="email" id="reg-email" placeholder="E-mail..." class="neutral" onblur="" required />
        <input type="password" name="password" id="reg-pass" placeholder="Password..." class="neutral" onblur="" required />
        <input type="password" name="password" id="reg-check-pass" placeholder="Check password..." class="neutral" onblur="" required />
    </fieldset>
    <fieldset class="tips">

    </fieldset>
    <fieldset class="submiting">
        <div class="rules-agree">
            <input type="checkbox" id="agree" />
            <label for="agree"></label>
            <p>Я согласен с <a href="#rules">правилами</a></p>
        </div>
        <button type="submit" disabled>
            <i class="icon-exit"></i>
        </button>
    </fieldset>
</form>

И такой вот скрипт, собственно первые функции в отдельном файле (все работают), а сам скрипт начинается с объявления переменных, проблема в том что по onblur ничего не происходит.

function filterUserName(val) {
    var re = /^[\wа-яёЁА-Я]+([._ -]?[\wа-яёЁА-Я]+)*$/;
    return re.test(val);
}

function filterEmail(val) {
    var re = /^([^\s\'\"]+)\@([^\s\'\"]+)$/;
    return re.test(val);
}

function filterPassword(val) {
    var re = /^[\w\d\!\@\#\$\%\^\&\*\(\)\_\+\=\№\%\*\?\<\>\~\{\}\[\]\|\-]*$/;
    return re.test(val);
}

function hasClass(el, cls) {
    return el.classList.contains(cls);
}

function addClass(el, cls) {
    if (!hasClass(el, cls)) el.className += (el.className ? ' ' : '') + cls;
}

function removeClass(el, cls) {
    var newArray = el.className ? el.className.split(" ") : [];
    var result = [];
    for (var i = 0; i < newArray.length; i++) {
        if (newArray[i] != cls) {
            result.push(newArray[i]);
        } else {
            continue;
        }
    }
    el.className = result.join(" ");
    return el.className;
}
var username = document.getElementById("reg-username");
var email = document.getElementById("reg-email");
var password = document.getElementById("reg-pass");
var checkPassword = document.getElementById("reg-check-pass");
var checkBox = document.getElementById("agree");
var button = document.getElementById("submit");

username.onblur = function () {
    if (filterUserName(this.value)) {
        removeClass(this, 'neutral');
        addClass(this, 'correct');
    } else {
        removeClass(this, 'neutral');
        addClass(this, 'in-correct');
    }
};
email.onblur = function() {
    if (filterEmail(this.value)) {
        removeClass(this, 'neutral');
        addClass(this, 'correct');
    } else {
        removeClass(this, 'neutral');
        addClass(this, 'in-correct');
    }
};
password.onblur = function() {
    if (filterPassword(this.value)) {
        removeClass(this, 'neutral');
        addClass(this, 'correct');
    } else {
        removeClass(this, 'neutral');56
        addClass(this, 'in-correct');
    }
};
checkPassword.onblur = function() {
    if (this.value == password.value) {
        removeClass(this, 'neutral');
        addClass(this, 'correct');
    } else {
      removeClass(this, 'neutral');
      addClass(this, 'in-correct');
    }
};

Хотелось бы совет или прямую наводку, ибо в намеках не силен, можно если что ссылку на статьи или что-то подобное по этому поводу, буду рад помощи вообщем-то.

можно если что на jsfiddle посмотреть или ссылочкой подогреть на исправленное: http://jsfiddle.net/daniilbagaev/sr4775no/1/

[krasovsky]

Открой консоль - там у тебя ошибка, не определен username, а так же и маил и все остальное равно null. Вероятно нужно пользовать window.onload . http://jsfiddle.net/sr4775no/2/
Ну и в консольку заглядывать никогда не помешает, а лучше держать открытой

[kostyanet]

Где вы такое старье откопали, или это такой стиль у кого-то?

Не надо ничего искать кроме формы. Если форма ровно 1 - то берете ее по тегу. Программируете его события, типа там change, input, blur и тп. Все что происходит с инпутами на форме - все идет через нее. Если инпут ченчж - то и форма ченчж.

form.addEventListener("change", validate);
			form.addEventListener("input", validate);

У формы свои elements к которым можно обращаться просто по имени. Например form.email = это поле имейла.

Постойте, так ведь тип email это html5. А почему тогда такой скрипт как будто из нулевых?

Короче, валидация (если не юзать встроенную) затем делается просто по типу поля.

var validate = {

  validate_email:function() {},
  validate_password:function(){},
//...
}

var name = 'validate_'+form[elem].type;
if(validate[name])
  return validate[name]();
else
 return true; // или общая проверка скажем на длину строки и тп

ЗЫ Методы еще куда-то можно запихать подозреваю, в прототип например, но я щетаю для таких простых вещей хватит и обычного объекта.

[kostyanet]

Кстати, помучившись с data- тегами я понял что в принципе обычных тегов вполне хватает для основных задач если их, теги, из индикаторов превратить в параметры. Например есть поле которое required. Это индикатор. И вы еще хотите чтобы длина текста в этом поле была не менее 3. Значит пишем required="3". В js получается, конечно, текст, но и компилятор в основном и вы сами унарной операцией можете сделать его числом. if(somevar > elem.required) работает автоматически, а когда надо посчитать то var somevar = +elem.required и у вас - число.

И еще, оказывается maxlength для типа file когда был специфицирован именно для байтов файла, а не текста имени файла (что вообще-то смысла не имеет, поскольку файловая система сама ограничивает и проверяет все), однако браузеропейсатели забили и поэтому maxlength в file значения не имеет, следовательно туда можно писать максимальный размер в килобайтах.

Аналогично с multiple. Если в этот индикатор вписать число, multiple="3", то скрип поймет что тут надо выбрать допустим не более 3. При этом индицирующая роль индикаторов никуда не девается.

Вписывать туда параметры не кошерно по отношению к xml, а кого колебет xml?

Еще, паттерн можно записать прямо в тег. Чтобы, допустим тип file проверять в контексте. Для паттернов регулярок такой тег и предусмотрен - pattern.