[英]dynamically add, validate and remove sets of form fields
我想创建一个网页,用户可以通过一个添加按钮添加和删除表单字段集,并删除与要删除的集合相关的按钮。 输入的值将通过 jquery validate 进行检查,其规则也是动态添加的。 请在下面查看我的目标表单的简化示例:
用于添加、删除和验证表单字段集的 javascript 代码的良好结构是什么? 我用谷歌搜索了——也在这个网站上——并且有许多用于添加表单域集的 javascript 示例。 我喜欢在查看源代码中找到的示例:http: //www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm ,它使用表单模板。 但我特别为删除按钮的 javascript 编码而苦苦挣扎..(不在示例中)
我的目标(简化)表单(带有 1 组 3 个表单域的模板):
<form name="myForm" id="myForm" method="post" action="">
<input id="name1" name="name1" />
<input id="email1" name="email1" />
<input id="phone1" name="phone1" />
<input type="submit" value="Save">
</form>
我认为您应该将表格模板化。 即将其包装在函数中,以便您可以一次又一次地创建它。 这是一个jsfiddle http://jsfiddle.net/krasimir/2sZsx/4/
HTML
<div id="wrapper"></div>
<a href="#" id="add-form">add form</a>
JS
var wrapper = $("#wrapper");
var addForm = $("#add-form");
var index = 0;
var getForm = function(index, action) {
return $('\
<form name="myForm" id="myForm" method="post" action="' + action + '">\
<input id="name' + index + '" name="name' + index + '" />\
<input id="email' + index + '" name="email' + index + '" />\
<input id="phone' + index + '" name="phone' + index + '" />\
<input type="submit" value="Save">\
<a href="#" class="remove">remove form</a>\
</form>\
');
}
addForm.on("click", function() {
var form = getForm(++index);
form.find(".remove").on("click", function() {
$(this).parent().remove();
});
wrapper.append(form);
});
提交表单时可以完成简单的验证,因此:
$('#myForm').submit({
var n1 = $('#name1').val();
var e1 = $('#email1').val();
var p1 = $('#phone1').val();
if (n1=='' || e1=='' || p1=='') {
alert('Please complete all fields');
return false;
}
});
请注意, return false
将中止提交并将用户返回文档。
可以在以下问题中找到添加/删除表单字段的出色代码: https : //stackoverflow.com/questions/18520384/removing-dynamically-generation-textboxes-in-jquery
如果您使用的是 KeenThemes(可能是 Metronic 主题) https://preview.keenthemes.com/good/documentation/forms/formvalidation/advanced.html
你可以这样做。
var form = document.getElementById('form_id');
var validator = FormValidation.formValidation(
form,
{
fields: {
name: {
validators: {
notEmpty: {
message: 'Please enter template name'
},
stringLength: {
min: 3,
trim: true,
message: 'Please enter a longer name.'
},
}
},
...
more fields here
...
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap(),
},
});
function addNewFieldDynamically() {
// add new field here
...
validator.addField('field_name', {
validators : {...}
})
}
function removeFieldDynamically() {
// remove a field here
...
validator.removeField('field_name')
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.