目前我有一个字段集中每个表单的计数器(i,j,k)。有没有办法创建一个函数,以便当我单击提交按钮时,它将检查字段的总数(i + j + k)是否正确,以便提交。例如,在这种形式中,我希望3个字段集中至少有9个表单。该按钮仅在满足该条件时提交。我只能使用HTML Css和JavaScript。
//First
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;
$('#addNew').live('click', function() {
$('<label>Choose a picture<a href="#" id="remNew">X</a><br><input type="file" ' + i + '" value="" required="required" /><img class="target" src="#" alt="Choose and Upload" /> </label><br>').appendTo(addDiv);
i++;
$('fieldset input').change(function() {
if (this.files && this.files[0]) {
var $target = $(this).next('.target');
var reader = new FileReader();
reader.onload = function(e) {
$target.attr('src', e.target.result).width(150).height(112);
};
reader.readAsDataURL(this.files[0]);
}
});
return false;
});
$('#remNew').live('click', function() {
if (i > 2) {
$(this).parents('label').remove();
i--;
}
return false;
});
});
//Second
$(function() {
var addDiv = $('#addinput2');
var j = $('#addinput2 p').size() + 1;
$('#addNew2').live('click', function() {
if (j > 5) {
alert("Reached maximum number of fields.");
return false;
}
$('<label>Choose a picture<a href="#" id="remNew2">X</a><br><input type="file" ' + j + '" value="" required="required"/><img class="target" src="#" alt="Choose and Upload" /></label><br>').appendTo(addDiv);
j++;
$('fieldset input').change(function() {
if (this.files && this.files[0]) {
var $target = $(this).next('.target');
var reader = new FileReader();
reader.onload = function(e) {
$target.attr('src', e.target.result).width(150).height(112);
};
reader.readAsDataURL(this.files[0]);
}
});
return false;
});
$('#remNew2').live('click', function() {
if (j > 2) {
$(this).parents('label').remove();
i--;
}
return false;
});
});
//Third
$(function() {
var addDiv = $('#addinput3');
var k = $('#addinput3 p').size() + 1;
$('#addNew3').live('click', function() {
if (k >= 6) {
alert("Reached maximum number of fields.");
return false;
}
$('<label>Choose a picture<a href="#" id="remNew3">X</a><br><input type="file" ' + k + '" value="" required="required"/><img class="target" src="#" alt="Choose and Upload" /></label><br>').appendTo(addDiv);
k++;
$('fieldset input').change(function() {
if (this.files && this.files[0]) {
var $target = $(this).next('.target');
var reader = new FileReader();
reader.onload = function(e) {
$target.attr('src', e.target.result).width(150).height(112);
};
reader.readAsDataURL(this.files[0]);
}
});
return false;
});
$('#remNew3').live('click', function() {
if (k > 2) {
$(this).parents('label').remove();
i--;
}
return false;
});
});
//Preload
$('fieldset input').change(function() {
if (this.files && this.files[0]) {
var $target = $(this).next('.target');
var reader = new FileReader();
reader.onload = function(e) {
$target.attr('src', e.target.result).width(150).height(112);
};
reader.readAsDataURL(this.files[0]);
}
});
.locationsector legend {
font-size: 2em;
}
.locationsector {
border-radius: 5px;
border: 5px solid black;
width: 30%;
margin-left: 0.7%;
float: left;
padding: 10px;
}
img {
text-align: center;
margin: 2%;
display: inline-block;
border: 10px solid black;
padding: 5px;
width: 150px;
height: 112px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form>
<fieldset class="locationsector" id="addinput">
<legend>1</legend>
<p>
<label>Choose a Picture
<input type="file" required="required" />
<img class="target" src="#" alt="Choose and Upload" />
</label>
<br>
<a href="#" id="addNew">Add</a>
</p>
</fieldset>
<fieldset class="locationsector" id="addinput2">
<legend>2</legend>
<p>
<label>Choose a Picture
<input type="file" required="required" />
<img class="target" src="#" alt="Choose and Upload" />
</label>
<br>
<a href="#" id="addNew2">Add</a>
</p>
</fieldset>
<fieldset class="locationsector" id="addinput3">
<legend>3</legend>
<p>
<label>Choose a Picture
<input type="file" required="required" />
<img class="target" src="#" alt="Choose and Upload" />
</label>
<br>
<a href="#" id="addNew3">Add</a>
</p>
</fieldset>
<input type="submit" class="sendform" onclick="check()"></input>
<input type="reset"></input>
</form>
答案 0 :(得分:0)
只需添加这些代码即可进行验证
function check(){
if (document.querySelectorAll('label > input').length < 9) {
alert('Invalid Number of Pictures');
}
}