Запуск Javascript onFocus - изменение HTML-текста DIV - PullRequest
Новая
       6

Запуск Javascript onFocus - изменение HTML-текста DIV

2 голосов
/ 31 августа 2011

В настоящее время я пытаюсь настроить свою контактную форму, чтобы при появлении неверного электронного сообщения отображалось сообщение об ошибке.Когда пустое или неправильное электронное письмо отправлено, страница должна сделать следующее:

  • Текст регистрации изменяется на «Повторить»
  • Красный текст появляется в поле ввода с указанием «Адрес введеннедопустимо '

, когда пользователь фокусируется на поле ввода или нажимает «повторить»;все элементы формы должны вернуться в исходное состояние.Я был в состоянии получить текст, чтобы изменить с красного на черный, используя метод onFocus.Я попытался создать небольшой маленький javascript с именем reset, который, как я надеялся, изменил текст DIV с «Retry» обратно на «Sign Up».

Я уверен, что моя проблема с Javascript.Может ли кто-нибудь указать мне правильное направление?:)

Для ссылки на код: http://itsmontoya.com/work/playdeadcult/indextest.php

Ответы [ 3 ]

0 голосов
/ 31 августа 2011

Один из способов сделать это: html: 

<form action="" method="post">
    <fieldset>
        <label for="emailAddress">Sign up for the newsletter</label>
        <input type="text" id="emailAddress" name="email" />
        <button id="submitButton" type="submit">Submit</button>
    </fieldset>
</form>

и JavaScript: 

var emailEntry = document.getElementById('emailAddress');
var button = document.getElementById('submitButton');
var defaultButtonText = button.innerHTML;

emailEntry.onblur = function(){
    var val = this.value;

    // the following IS NOT a valid test of email address validity
    // it's for demo purposes ONLY

    if (val.length < 5 && val.indexOf('@') == -1){
        button.innerHTML = 'retry';
        button.style.color = 'red';
    }
    else {
        button.innerHTML = defaultButtonText;
        button.style.color = 'black';
    }
};

button.onclick = function(){
    // prevent submission of the form if the email was found invalid
    // and the innerHTML was therefore set to 'retry'
    if (this.innerHTML == 'retry'){
        return false;
    }
};

JS Fiddle demo .

0 голосов
/ 31 августа 2011

Попробуйте вместо этого: 

function validate() {
    if($("#buttonDiv").html()== 'Retry')
    {
        // oops! They are trying to get back to where they were by 
        // re-clicking retry. Let's reset this thing
        reset()
        return false;
    }
    var emDiv = document.getElementById('email') // only look up once.
    if(emDiv) {
        // the space after the . should allow for 6 long
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,6})$/;
        var address = emDiv.value;
        // good form issue -- never use == false. use !
        if(!reg.test(address)) {
            emDiv.value = 'Address entered not valid';
            emDiv.style.color = '#bf4343';
            emDiv.style.fontSize = '12px';
            $("#buttonDiv").html( 'Retry' );
            return false;
        }
    }
}
0 голосов
/ 31 августа 2011

Это просто закомментированный блок вашей функции reset (), с чем вам нужна помощь?Если это так, вы можете попробовать его версию jQuery, так как вы все равно загрузили jQuery =)

Ниже приведена функция reset (), которая меняет цвет текста на красный: 

$('#email').val('').css('color', '#FF0000').css('font-size', '18px');

Ниже приведена функция размытия (), которая меняет цвет текста на черный.Прикрепите это к вашему текстовому полю ввода электронной почты, и вы должны установить: 

$('#email').blur().css('color', '#000000');
...