在上下文菜单中单击“打印”按钮时验证html表单字段

Question

我的桌面应用程序中有一个html表单，使用php桌面铬浏览器。我在验证表单字段时遇到了问题，因为此表单根本没有提交按钮，因为我打算将此表单用于打印，因此不需要在线提交任何数据或提交按钮。当用户试图从上下文菜单打印此表单时，我希望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>

Answer 1

实际上，使用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;

​

Answer 2

// 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");
}

Answer 3

好的，首先，为了访问的目的，您需要向表单标记添加一个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
    } 
}