我正在使用Jquery验证，我的表单最后允许用户提交任何可能有用的额外文档。如果他们需要上传多个额外文档，那么他们可以单击一个按钮，该按钮将使用Jquery添加新文件输入框。创建新文件输入时，我需要添加验证规则。
我正在尝试使用以下函数动态创建新文件输入的名称并向其添加验证规则。它给出以下错误 - “未捕获的TypeError：无法读取未定义的属性'设置'”
<h1>New Application - 2</h1>
<form method="post" id="appli-2">
<div class="container">
<div id="sections">
<div class="section">
<div class="row" id="otherDoc">
<div class="col-xs-12">
<label class="required" for="other_doc1">Upload other documents(pdf, jpg png)</label>
<input type="file" class="file other_doc" name="other_doc" id="other_doc">
</div>
</div>
</div>
</div>
<hr>
<button type="button" id="addOtherDoc" class="btn btn-default">Add another document</button>
<p> </p>
<label style="text-align: center;">Do you wish to register ?</label></br>
<div="row">
<div class="col-sm-6">
<button id="yes" class="btn btn-default btn_nav">YES</button>
</div>
<div class="col-sm-6">
<button id="no" class="btn btn-default btn_nav">NO</button>
</div>
</div>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//define template
var template = $('#sections .section:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$("#addOtherDoc").click(function() {
//increment
sectionsCount++;
//loop through each input
var section = template.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.name + sectionsCount;
//update for label
$(this).prev().attr('for', newId);
//update id
$(this).attr('id', newId);
this.name = newId;
}).end()
//inject new section
.appendTo('#sections');
reValidate();
return false;
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script>
$("#appli-2").validate({
rules: {
other_doc: {
required: true,
accept: "pdf,jpg,png"
}
},
messages: {
other_doc: {
required: "Select Image",
accept: "Only image type jpg/png/pdf is allowed"
}
}
});
function reValidate() {
var name = "#other_doc";
name += sectionsCount;
console.log(name);
$(name).rules("add", {
required: true,
accept: "pdf,jpg,png",
messages: {
required: "Select Image",
accept: "Only image type jpg/png/pdf is allowed"
}
});
}
</script>
<script>
$("#appli-2").validate({
rules: {
other_doc: {
required: true,
accept: "pdf,jpg,png"
}
},
messages: {
other_doc: {
required: "Select Image",
accept: "Only image type jpg/png/pdf is allowed"
}
}
});
function reValidate() {
var name = "#other_doc";
name += sectionsCount;
console.log(name);
$(name).rules("add", {
required: true,
accept: "pdf,jpg,png",
messages: {
required: "Select Image",
accept: "Only image type jpg/png/pdf is allowed"
}
});
}
</script>
答案 0 :(得分：0)
我相信您遇到的错误是jQuery Validate的其他方法文件未包含在页面中的结果。验证文件上传需要此文件。
可以从https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js
下载以下示例：
//define template
var template = $('#sections .section:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$("#addOtherDoc").click(function() {
//increment
sectionsCount++;
//loop through each input
var section = template.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.name + sectionsCount;
//update for label
$(this).prev().attr('for', newId);
//update id
$(this).attr('id', newId);
this.name = newId;
}).end()
//inject new section
.appendTo('#sections');
reValidate();
return false;
});
$("#appli-2").validate({
rules: {
other_doc: {
required: true,
accept: "pdf,jpg,png"
}
},
messages: {
other_doc: {
required: "Select Image",
accept: "Only image type jpg/png/pdf is allowed"
}
}
});
function reValidate() {
var name = "#other_doc";
name += sectionsCount;
console.log(name);
$(name).rules("add", {
required: true,
accept: "pdf,jpg,png",
messages: {
required: "Select Image",
accept: "Only image type jpg/png/pdf is allowed"
}
});
}
$("#appli-2").validate({
rules: {
other_doc: {
required: true,
accept: "pdf,jpg,png"
}
},
messages: {
other_doc: {
required: "Select Image",
accept: "Only image type jpg/png/pdf is allowed"
}
}
});
function reValidate() {
var name = "#other_doc";
name += sectionsCount;
console.log(name);
$(name).rules("add", {
required: true,
accept: "pdf,jpg,png",
messages: {
required: "Select Image",
accept: "Only image type jpg/png/pdf is allowed"
}
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script>
<form method="post" id="appli-2">
<div class="container">
<div id="sections">
<div class="section">
<div class="row" id="otherDoc">
<div class="col-xs-12">
<label class="required" for="other_doc1">Upload other documents(pdf, jpg png)</label>
<input type="file" class="file other_doc" name="other_doc" id="other_doc">
</div>
</div>
</div>
</div>
<hr>
<button type="button" id="addOtherDoc" class="btn btn-default">Add another document</button>
<p> </p>
<label style="text-align: center;">Do you wish to register ?</label></br>
<div="row">
<div class="col-sm-6">
<button id="yes" class="btn btn-default btn_nav">YES</button>
</div>
<div class="col-sm-6">
<button id="no" class="btn btn-default btn_nav">NO</button>
</div>
</div>
</div>
</form>