我的桌面应用程序中有一个html表单，使用phpdesktop chrome浏览器。我在验证表单字段时遇到问题，因为此表单根本没有提交按钮，因为我打算仅使用此表单进行打印，因此无需在线提交任何数据或提交按钮。 当用户试图从上下文菜单中打印此表单时，我希望javascript或php检查此表单，简单就是这样！ 我只想要javascript或php来确保在打印之前没有字段保持为空，并且所有字段都必须填充数据。 任何帮助将受到高度赞赏。感谢
form.html
<form>
<div class="field1">
<input class="varify-field" id="varify-field" type="text" name="fname" maxlength="80" size="14" onkeyup="updateVerifyname();"><div class="varify-name"></div>
<input class="walad-field" id="walad-field" type="text" name="fname" maxlength="40" size="14" onKeyup="updateWaladname();"><div class="walad-name"></div>
</div><!-- field1 closed here -->
<div class="field2">
<input class="sakan-field" type="text" name="fname" maxlength="40" size="11"><div class="sakan-name"></div>
<input class="tehsil-field" type="text" name="fname" maxlength="40" size="7"><div class="tehsil-name"></div>
<input class="zila-field" type="text" name="fname" maxlength="40" size="7" placeholder=""><div class="zila-name"></div>
</div><!-- field2 closed here -->
<div class="field3">
<input class="barmisal-field" type="text" name="fname" maxlength="40" size="11"><div class="barmisal-name"></div>
<input class="darja-field" type="text" name="fname" maxlength="40" size="3"><div class="darja-name"></div>
<div class="hai"></div>
</div><!-- field3 closed here -->
<div class="field4">
<h4 class="last-line"></h4>
</div><!-- field4 closed here -->
<img class="darkhwast-dahinda-img" height="33" width="275" src="../images/darkhwast-dahinda-img.png">
<div class="name-wrap">
<input class="name-field" id="name-field" type="text" name="fname" maxlength="40" size="14"><div class="name"></div><div class="name-field-no"></div>
</div><!-- name-wrap closed here -->
<div class="disc-maj-wrap">
<div class="disc-maj-name"></div>
</div><!-- disc-maj-wrap closed here -->
<div class="father-wrap">
<input class="father-field" id="father-field" type="text" name="fname" maxlength="40" size="14"><div class="father-name"></div><div class="father-field-no"></div>
</div><!-- father-wrap closed here -->
<div class="address-wrap">
<input class="address-field" type="text" name="fname" maxlength="100" size="45"><div class="address-name"></div><div class="address-field-no"></div>
</div><!-- address-wrap closed here -->
<div class="marital-status-wrap">
<input class="marital-status-field" type="text" name="fname" maxlength="40" size="9"><div class="marital-status-name"></div><div class="marital-status-field-no"></div>
</div></br><!-- marital-status-wrap closed here -->
<div class="wife-husband-wrap">
<input class="wife-husband-field" type="text" name="fname" maxlength="40" size="8"><div class="wife-husband-name"></div><div class="wife-husband-field-no"></div>
</div><!-- wife-husband-wrap closed here -->
<div class="occuption-wrap">
<input class="occuption-field" type="text" name="fname" maxlength="40" size="14"><div class="occuption-name"></div><div class="occuption-field-no"></div>
</div><!-- occuption-wrap closed here -->
<div class="identity-wrap">
<input class="identity-field" type="text" name="fname" maxlength="40" size="10"><div class="identity-name"></div><div class="identity-field-no"></div>
</div><!-- identity-wrap closed here -->
<div class="sign-wrap">
<input class="sign-field" type="text" name="fname" maxlength="40" size="13"><div class="sign-name"></div><div class="sign-field-no"></div>
</div><!-- sign-wrap closed here -->
<div class="birth-wrap">
<input class="birth-field" type="text" name="fname" maxlength="40" size="21"><div class="birth-name"></div><div class="birth-field-no"></div>
</div><!-- birth-wrap closed here -->
<div class="childs-name-ages-wrap">
<h4 class="childs-name-ages"></h4><div class="childs-name-ages-no"></div>
</div>
<div class="name-age">
<div class="nname"></div>
<div class="age"></div>
</div>
<div class="empty-name-age1-1">
<input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
<input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
</div>
<div class="empty-name-age1-2">
<input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
<input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
</div>
<div class="empty-name-age1-3">
<input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
<input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
</div>
<div class="empty-name-age1-4">
<input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
<input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
</div>
<div class="empty-name-age1-5">
<input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
<input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
</div>
<div class="empty-name-age1-6">
<input class="empty-name-field-1" type="text" name="fname" maxlength="40" size="15">
<input class="empty-age-field-1" type="text" name="fname" maxlength="40" size="12">
</div>
<table class="id-card">
<tr>
<th colspan="15"></th>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td class="daash" contenteditable='false'>-</td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
<td class="daash" contenteditable='false'>-</td>
<td contenteditable='true'></td>
</tr>
</table>
<table id="finger-prints">
<tr>
<th colspan="15"></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="disc-maj-container">
<div class="disc-maj-2-wrap">
<input class="disc-maj-2-field" type="text" name="fname" maxlength="40" size="7"><div class="disc-maj-2-name"></div>
</div><!-- disc-maj-2-wrap closed here -->
<div class="date-wrap">
<input class="date-field" type="text" name="fname" maxlength="40" size="25"><div class="date-name"></div>
</div><!-- date-wrap closed here -->
<div class="zila-number-wrap">
<input class="zila-number-field" type="text" name="fname" maxlength="40" size="26"><div class="zila-number-name"></div>
</div><!-- date-wrap closed here -->
</div><!-- disc-maj-container closed here -->
<div class="image-container" style="width:230px;height:275px;">
<div class="domicile-pic"></div>
</div>
</form>
答案 0 :(得分：2)
实际上使用javascript无法取消打印事件。换句话说，您无法阻止用户手动触发打印。您可以处理窗口onbeforeprint和onafterprint事件并进行验证，但无法取消这些事件。您可以添加一些样式表，告知用户表单无效。为此，您可以使用此脚本：
function beforePrint() {
console.info("Validation before print");
};
function afterPrint() {
console.log("Called after print");
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
答案 1 :(得分：1)
// Gets all input fields
var allInputFields = document.getElementsByTagName('input');
var allInputFieldsLn = allInputFields.length;
// Loops through all inputs to validate they are not empty
var inputIsEmpty = false;
for (var i = 0; i < allInputFieldsLn; i++) {
if (allInputFields[i].value == "") {
inputIsEmpty = true;
return;
}
}
// Checks if empty input was found
if (inputIsEmpty == true) {
console.log("An input was not filled");
}
答案 2 :(得分：1)
好的，首先，您需要在表单标记中添加name属性以供访问。
然后你必须从你的表单中获取每个字段并迭代它们以检查它们如下（普通javascript）并在遇到空输入时标记一个字段是否为空且带有布尔值：
function validateForm() {
var inputArray=document.forms["nameOfYourForm"]
var hasOneEmpty = false;
for (var i = 0; i < inputArray.length; i++) {
if ((inputArray[i].value == null) || (inputArray[i].value === "")) {
hasOneEmpty = true;
}
}
if (hasOneEmpty === true) {
// Do something if it has one empty
}
}