我正在将动态输入字段添加到Web表单。我正在使用此Jquery Mask插件对此进行验证。
它可以在初始输入上正常工作,但不能动态添加。
我输入的HTML是;
<input type="text" id="mac_address" name="MacAddress[]">
我的按钮HTML是;
<button class="add-mac" type="button" title="Add">Add</button>
用于验证输入的语法为(仅在第一个输入上有效);
$('#mac_address').mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
translation: {
'Z': {
pattern: /[A-Fa-f0-9]/,
optional: false,
}
}
});
如何将此验证添加到动态输入中?
我尝试将代码添加到each
循环中,尽管它不起作用。
$('.add-mac').click(function() {
$('#mac_address').each(function() {
$(this).mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
translation: {
'Z': {
pattern: /[A-Fa-f0-9]/,
optional: false,
}
}
});
});
});
任何建议都值得赞赏。
答案 0 :(得分:1)
添加了要输入的类
<input type="text" class="mac_address" id="mac_address" name="MacAddress[]">
<button class="add-mac" type="button" title="Add">Add</button>
<script>
var count = 1;
$('.add-mac').click(function() {
$('.mac_address').last().clone().attr('id', 'mac_address' + count).val('').insertBefore($(this));
count ++;
});
$(document).on('keyup', '.mac_address', function(){
$('.mac_address').mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
translation: {
'Z': {
pattern: /[A-Fa-f0-9]/,
optional: false,
}
}
});
})
$('.mac_address').mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
translation: {
'Z': {
pattern: /[A-Fa-f0-9]/,
optional: false,
}
}
});
</script>
答案 1 :(得分:0)
将id更改为class
<input type="text" class="mac_address" name="MacAddress[]">
<button class="add-mac" type="button" title="Add">Add</button>
<script>
$('.add-mac').click(function() {
$('.mac_address').each(function() {
$(this).mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
translation: {
'Z': {
pattern: /[A-Fa-f0-9]/,
optional: false,
}
}
});
});
});
</script>