/** @type Object настройки валидации */ var VALIDATE_SETTINGS = { /** @type String класс индикатора неудачной валидации */ FAIL_CLASS: 'fail', /** @type String класс индикатора успешной валидации */ PASS_CLASS: 'pass', /** @type String класс элемента ввода, который провалил валидацию */ FAIL_INPUT_CLASS: 'fail', /** @type RegExp */ EMAIL_FILTER: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, /** @type RegExp */ LOGIN_FILTER: /^[a-zA-Z0-9_\-]{4,20}$/ } /** @type jQuery элемент типа submit для формы регистрации */ var registrationFormSubmit /** @type Array ассоциативный массив флагов, какое поле прошло валидацию, а какое нет */ var validationStatus = new Array() /** @type jQuery контейнер подсказки для проверки логина */ var loginTip /** @type jQuery контейнер подсказки для проверки адреса электронной почты */ var emailTip /** @type Bool валидация включена */ var validationEnabled = true function jsSubmitForm() { if ( !registrationFormSubmit.attr('disabled') ) { setSubmitDisabled(true) registrationFormSubmit.attr('src', '/img/buttons/loadingDisabled.gif') var subscribedValue if ( $('#f_subscribe').is(':checked') ) { subscribedValue = 1 } else { subscribedValue = 0 } // поставить всем полям "только чтение" $('#f_login').attr('readonly', true) $('#f_email').attr('readonly', true) $('#f_pass1').attr('readonly', true) $('#f_pass2').attr('readonly', true) $('#f_first_name').attr('readonly', true) $('#f_last_name').attr('readonly', true) $('#f_nick').attr('readonly', true) $('#f_subscribe').attr('disabled', true) validationEnabled = false // $(this).parents('form').submit() $.post( '/registration/', { 'login': $('#f_login').val(), 'email': $('#f_email').val(), 'password': $('#f_pass1').val(), 'password2': $('#f_pass2').val(), 'name': $('#f_first_name').val(), 'surname': $('#f_last_name').val(), 'nick': $('#f_nick').val(), 'subscribe': subscribedValue }, function () { // tb_show(null, '/registration/complete.html?KeepThis=true&TB_iframe=true&height=260&width=600', false, '/') // tb_show(null, '/registration/complete.html?KeepThis=true&TB_iframe=true&height=260&width=600', false, '/') tb_show(null, '/?TB_inline&height=300&width=600&inlineId=modal-registrationComplete&modal=true', false, '/') } ) } } $(document).ready( function () { // показываем окошко логина, если пользователь не авторизован if ( loggedIn ) { // tb_show(null, '/registration/loggedIn.html?KeepThis=true&TB_iframe=true&height=300&width=600', null) tb_show(null, '/registration/loggedIn.html?TB_inline&height=300&width=600&inlineId=modal-alreadyAuthorized&modal=true&', null) } var imageLoader1 = new Image() imageLoader1.src = '/img/buttons/joinEnabled.gif' var imageLoader2 = new Image() imageLoader2.src = '/img/buttons/loadingDisabled.gif' // добавляем подсказку для проверки логина аяксом loginTip = $('') loginTip.appendTo('#loginContainer') // добавляем подсказку для проверки адреса электронной почты аяксом $('').appendTo('#emailContainer') emailTip = $('') emailTip.appendTo('#emailContainer') // добавляем кнопку отправки формы // registrationFormSubmit = $('') // $('form#registrationForm fieldset').append(registrationFormSubmit) registrationFormSubmit = $('#registrationFormSubmit') var login = $('#f_login') login.keyup(function(){validateLogin(this)}) login.focus(function(){validateLogin(this)}) login.blur(function(){validateLogin(this)}) var email = $('#f_email') email.keyup(function(){validateEmail(this)}) email.focus(function(){validateEmail(this)}) email.blur(function(){validateEmail(this)}) var password = $('#f_pass1') password.keyup(function(){validatePassword('f_pass1', 'f_pass2')}) password.focus(function(){validatePassword('f_pass1', 'f_pass2')}) password.blur(function(){validatePassword('f_pass1', 'f_pass2')}) var passwordConfirm = $('#f_pass2') passwordConfirm.keyup(function(){validatePassword('f_pass1', 'f_pass2')}) passwordConfirm.focus(function(){validatePassword('f_pass1', 'f_pass2')}) passwordConfirm.blur(function(){validatePassword('f_pass1', 'f_pass2')}) login.keyup() email.keyup() password.keyup() passwordConfirm.keyup() login.focus() } ) /** * ставиться обработчиком для полей ввода пароля * и ввода подтверждения пароля на события keyup blur и focus * @param {String} passwordInputElementId идентификатор элемента ввода пароля * @param {String} passwordConfirmInputElementId идентификатор элемента ввода подтверждения пароля */ function validatePassword(passwordInputElementId, passwordConfirmInputElementId) { if ( validationEnabled ) { /** @type String пароль */ var password = $('#' + passwordInputElementId).val() /** @type String подтверждение пароля */ var passwordConfirm = $('#' + passwordConfirmInputElementId).val() if ( password.length == 0 || passwordConfirm.length == 0 ) { showRequiredIndicator(passwordInputElementId, 'password') showRequiredIndicator(passwordConfirmInputElementId, 'password') } else { showValidationIndicator(passwordInputElementId, (password == passwordConfirm), 'password') showValidationIndicator(passwordConfirmInputElementId, (password == passwordConfirm), 'password') } } } var validateLoginTimer /** * функция ставиться обработчиком для поля ввода логина * на события keyup blur и focus * @param {HTMLInputElement} loginInputElement input-элемент для ввода логина */ function validateLogin(loginInputElement) { clearTimeout(validateLoginTimer) /* TODO: проверку аяксом сделать только при изменении значения поля */ if ( validationEnabled ) { /** @type String */ var loginInputElementId = $(loginInputElement).attr('id') /** @type String */ var loginToValidate = loginInputElement.value if ( loginToValidate == '' ) { showRequiredIndicator(loginInputElementId, 'login') } else { /** @type Bool */ var valid = isValidLogin(loginToValidate) if ( valid ) { validateLoginTimer = setTimeout( function() { $.get( '/registration/isLoginFree.html', { 'login': loginToValidate }, function (loginIsFree) { var valid = ( isValidLogin(loginToValidate) && (loginIsFree == 1) ) showValidationIndicator(loginInputElementId, valid, 'login') var loginTipString = '' if ( loginIsFree == 0 ) { loginTipString = 'занят' } loginTip.text(loginTipString) } ) }, 1000 ) } else { loginTip.text('') showValidationIndicator(loginInputElementId, false, 'login') } } } } var validateEmailTimer /** * функция ставиться обработчиком для поля ввода электронной почты * на события keyup blur и focus * @param {HTMLInputElement} email input-элемент для ввода адреса электронной почты */ function validateEmail(emailInputElement) { clearTimeout(validateEmailTimer) if ( validationEnabled ) { /** @type String */ var emailInputElementId = $(emailInputElement).attr('id') /** @type String */ var emailToValidate = emailInputElement.value if ( emailToValidate == '' ) { showRequiredIndicator(emailInputElementId, 'email') } else { /** @type Bool */ var valid = isValidEmail(emailToValidate) if ( valid ) { validateEmailTimer = setTimeout( function () { $.get( '/registration/isEmailFree.html', { 'email': emailToValidate }, function (emailIsFree) { var valid = ( isValidEmail(emailToValidate) && (emailIsFree == 1) ) showValidationIndicator(emailInputElementId, valid, 'email') var emailTipString = '' if ( emailIsFree == 0 ) { emailTipString = 'занят' } emailTip.text(emailTipString) } ) }, 1000 ) } else { emailTip.text('') showValidationIndicator(emailInputElementId, false, 'email') } } } } /** * показывает индикатор валидации для элемента с идентификатором id * в зависимости от значения аргумента valid * @param {String} id идентификатор элемента, для которого показывается индикатор * @param {Bool} valid валидно ли содержимое элемента? * @param {String} validationStatusField поля статуса валидации (используется для отключения кнопки отправки формы) */ function showValidationIndicator(id, valid, validationStatusField) { if ( valid ) { showPassIndicator(id, validationStatusField) } else { showFailIndicator(id, validationStatusField) } } /** * показывает индикатор обязательного поля * для элемента с идентификатором id * @param {String} id идентификатор элемента, для которого показывается индикатор * @param {String} validationStatusField поля статуса валидации (используется для отключения кнопки отправки формы) */ function showRequiredIndicator(id, validationStatusField) { updateValidationStatus(validationStatusField, false) /** @type HTMLElement */ var indicatorElement = $('#v' + id) indicatorElement.removeClass(VALIDATE_SETTINGS.PASS_CLASS) indicatorElement.removeClass(VALIDATE_SETTINGS.FAIL_CLASS) } /** * показывает индикатор неудачной валидации * для элемента с идентификатором id * @param {String} id идентификатор элемента, для которого показывается индикатор * @param {String} validationStatusField поля статуса валидации (используется для отключения кнопки отправки формы) */ function showFailIndicator(id, validationStatusField) { updateValidationStatus(validationStatusField, false) $('#' + id).addClass(VALIDATE_SETTINGS.FAIL_INPUT_CLASS) /** @type HTMLElement */ var indicatorElement = $('#v' + id) indicatorElement.removeClass(VALIDATE_SETTINGS.PASS_CLASS) indicatorElement.addClass(VALIDATE_SETTINGS.FAIL_CLASS) } /** * показывает индикатор удачной валидации * для элемента с идентификатором id * @param {String} id идентификатор элемента, для которого показывается индикатор * @param {String} validationStatusField поля статуса валидации (используется для отключения кнопки отправки формы) */ function showPassIndicator(id, validationStatusField) { updateValidationStatus(validationStatusField, true) $('#' + id).removeClass(VALIDATE_SETTINGS.FAIL_INPUT_CLASS) /** @type HTMLElement */ var indicatorElement = $('#v' + id) indicatorElement.removeClass(VALIDATE_SETTINGS.FAIL_CLASS) indicatorElement.addClass(VALIDATE_SETTINGS.PASS_CLASS) } /** * изменяет состояние поля статуса валидации * @param {String} validationStatusField имя поле * @param {Bool} status true, если валидация пройдена, false иначе */ function updateValidationStatus(validationStatusField, status) { validationStatus[validationStatusField] = status refreshSubmitDisabled() } /** * обновляет статус кнопок отправки формы регистрации - можно их нажимать, или нет */ function refreshSubmitDisabled() { var enabled = (validationStatus['login'] && validationStatus['email'] && validationStatus['password']) setSubmitDisabled(!enabled) } /** * управляет состоянием отключённости для кнопки отправки формы регистрации * @param {Bool} disabled true, если надо отключить возможность нажатия кнопки */ function setSubmitDisabled(disabled) { var srcValue if ( disabled ) { srcValue = '/img/buttons/joinDisabled.gif' registrationFormSubmit.attr('disabled', 'disabled') } else { srcValue = '/img/buttons/joinEnabled.gif' registrationFormSubmit.removeAttr('disabled') } registrationFormSubmit.attr('src', srcValue) } /** * изменяет текст на кнопке отправки формы регистрации * @param {String} text */ function setSubmitText(text) { $('span span', registrationFormSubmit).text(text) } /** * проверяет, является ли аргумент подходящим (для регистрации) адресом электронной почты * @param {String} email * @return {Bool} true, если аргумент является подходящим адресом электронной почты, false иначе */ function isValidEmail(email) { return VALIDATE_SETTINGS.EMAIL_FILTER.test(email) } /** * проверяет, является ли логин подходящим для регистрации * @param {String} login * @return {Bool} true, если аргумент является подходящим логином, false иначе */ function isValidLogin(login) { return VALIDATE_SETTINGS.LOGIN_FILTER.test(login) }