2013-02-14 2 views
1

Мне нужна большая помощь, я был в этом коде уже два дня. У меня есть эта таблица, созданная javascript, которая используется для подтверждения ввода пользователя. Если пользователь видит ошибку, они могут щелкнуть по ячейке, и она позволяет пользователю редактировать контент прямо там. Я пытаюсь настроить, где он отображается, если адрес электронной почты пользователя действителен или недействителен. Сценарий работает хорошо, но если пользователь удаляет полный адрес электронной почты, содержимое больше не редактируется, что не будет хорошо. Мой код до сих пор:Javascript проверяет ввод пользователя

HTML:

<table id = 'confirm'> 
    <tr> 
    <th>Email</th> 
    <td id = 'tdEmail'> 
     <div onkeyup = 'verifyEmail(this.parentNode.id)' contentEditable> 
     [email protected] 
     <div id = 'validInvalid'> 
      <span class = 'dgreen'> //Use to create a sort of green for valid email, when the user first sees the confirm table, the email is valid. 
      <br/>Valid email! 
      </span> 
     </div> 
     </div> 
    </td> 
    </tr> 
</table>  

JS:

function verifyEmail(id){ 
    var email = document.getElementById.firstChild.firstChild.nodeValue; 
    var emailFilter = /^[^0-9][A-z0-9_]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/; 
    if(!emailFilter.test(email)){ 
    document.getElementById("validInvalid").innerHTML = "<span class = 'red'><br/>Not a valid email!</span>"; 
    }else{ 
    document.getElementById("validInvalid").innerHTML = "<span class = 'dgreen'><br/>Valid email!</span>"; 
    } 
} 
+0

содержание не редактируется в 'div'. Как вы делаете это редактируемым в первую очередь? Почему вы не используете 'input'? Вы должны посмотреть на подтверждение ввода пользователя, когда элемент теряет фокус при отправке формы (я предполагаю, что для этого больше всего). – matthewpavkov

+1

contentEditable – Shanimal

+1

С атрибутом 'contentEditable', @matthewpavkov? – BenM

ответ

1

Ваша ширина DIV получает уменьшенные, поэтому вы не можете редактировать содержание, если содержание устанавливается в '' один из способов решения вашей проблемы - предоставить фиксированную ширину вашему div.

Вы можете увидеть ниже исправление: jsfiddle

+0

Или используйте атрибут стиля 'min-width'. – marekful

+0

Я получаю 'verifyEmail не определен' в Firefox и Chrome. – matthewpavkov

+0

Он отлично работает, мой хром. У меня нет firefox на этом конкретном компьютере, но я уверен, что они примерно такие же. Я исправил его с использованием свойства фиксированной ширины. – Vince