Если добавить input динамический маска инпута не работает, почему?

Question

[farrukh77]

Ест пример динамический добавление инпута сделал максу телефона с помощью mask но он реагирует на добавленные инпута
код добавление инпута

var countOfFields = 1; // Текущее число полей
var curFieldNameId = 1; // Уникальное значение для атрибута name
var maxFieldLimit = 200; // Максимальное число возможных полей
function deleteField(a) {
 // Получаем доступ к ДИВу, содержащему поле
 var contDiv = a.parentNode;
 // Удаляем этот ДИВ из DOM-дерева
 contDiv.parentNode.removeChild(contDiv);
 // Уменьшаем значение текущего числа полей
 countOfFields--;
 // Возвращаем false, чтобы не было перехода по сслыке
 return false;
}
function addFielda() {
 // Проверяем, не достигло ли число полей максимума
 if (countOfFields >= maxFieldLimit) {
 alert("Число полей достигло своего максимума = " + maxFieldLimit);
 return false;
 }
 // Увеличиваем текущее значение числа полей
 countOfFields++;
 // Увеличиваем ID
 curFieldNameId++;
 // Создаем элемент ДИВ
 var div = document.createElement("div");
 // Добавляем HTML-контент с пом. свойства innerHTML
 div.innerHTML = "<input  name=\"name[]" + curFieldNameId + "\" type=\"text\" id=\"date\"  />  <a onclick=\"return deleteField(this)\" href=\"#\">[x]</a>";
 // Добавляем новый узел в конец списка полей
 document.getElementById("parentId").appendChild(div);
 // Возвращаем false, чтобы не было перехода по сслыке
 return false;
}

$(function(){
$("#date").mask("99-99-9999");
});

<code lang="html">
<div  id="parentId">
<input name="name[]" id="date" type="text"  />
<a style="margin-left:30px;" onclick="return addFielda()" href="#">+</a>
</div>
пожалуйста помогите с кодом может я не то делаю ! 
</code>

Answer 1

[Yevgeniy Kisselyov]

У вас все инпуты с одинаковым id это раз и так делать нельзя.
Поменяйте например

div.innerHTML = "<input  name=\"name[]" + curFieldNameId + "\" type=\"text\" id=\"date\"  />  <a onclick=\"return deleteField(this)\" href=\"#\">[x]</a>";

на

div.innerHTML = "<input  name=\"name[]" + curFieldNameId + "\" type=\"text\" id=\"date" + curFieldNameId + "\"  />  <a onclick=\"return deleteField(this)\" href=\"#\">[x]</a>";

А сразу после

document.getElementById("parentId").appendChild(div);

Добавьте
$("#date"+curFieldNameId ).mask("99-99-9999");

Comments

[farrukh77]

Работает огромное спасибо! самый быстрый о правильный ответ )))

[Yevgeniy Kisselyov]

farrukh77: Вместо спасибо лучше отметьте решением, так здесь правильней )

Answer 2

[farrukh77]

А можно ли поставит условию после
$("#date"+curFieldNameId ).mask("99-99-9999");

if (document.getElementById("#date"+curFieldNameId ).value==99.99.9999 )
{
alert("Ошибка");
}

Comments

[farrukh77]

или любую условию через if

[Yevgeniy Kisselyov]

Условие то поставить можно конечно, но не факт что маска успеет инициализироваться до этого условия. Чтоб проверять сработала маска или нет нужно смотреть в документацию плагина

[farrukh77]

можно еще вопрос?
почему при динамическом инпуте
не работает условия if
onkeyup="if(this.value.length>6){alert('Ошибочка');}"

[farrukh77]

если написать эту условию внутри инпута

[M-ka]

а еще, если окажется, что нет ай ди, а вы от него возьмете значение.... привет жс ошибка и стоп сценарий