如何编辑此函数，使其仅在输入字段完成时运行？

Question

我有一个从两个日期输入字段捕获数据的函数。

我在一个img上有一个单击侦听器，它会触发函数。我想编辑我的代码，以便它只在两个日期字段都完全填写(mm-dd-yyyy)时才触发函数。

如果其中一个或两个都没有填写，我想返回一个字符串“请填写日期字段，然后再次单击”。

我还有两个文本输入字段(用于姓名)，但没有任何功能。类似地，我希望姓名输入字段要求每个字段中至少有一个字母，否则它将返回类似的字符串，如“请为每个字段输入一个名称并再次单击！”。

    var sumButton = document.querySelector(".sumNumbers");
    sumButton.addEventListener("click", getSum);

    function getSum() {
    // Place the id's of the input and output elements into respective arrays
    let inputs = ['dateInput1','dateInput2'];
    let outputs = ['result1','result2'];

    // Loop over the items in the inputs array
    // This will cause you to loop as many times as there are input elements
    inputs.forEach(function(input, index){

    // Instead of hard-coding the element id, you get the element reference
    // from the .forEach callback function argument.
    const inputValue = document.getElementById(input).value;
    var sum = 0;

    for (var i = 0; i < inputValue.length; i++) {
        const num = parseInt(inputValue.charAt(i));
        if (!isNaN(num)) {
            sum += num;
      }
    }

    const total = (sum - 1) % 9 + 1;

    // And here, you reference the right output element, by using the corresponding index from the inputs array.
    document.getElementById(outputs[index]).textContent = "Your number is: " + total;

    });
}

<form action="">
    <div class="container">
        <div class="cell-1" id="centerElement">
            <div id="cell-1-nest-l"></div>
            <div id="cell-2-nest-l"></div>
            <div id="cell-3-nest-l"></div>
            <div id="cell-4-nest-l"><h3>your name</h3></div>
            <div id="cell-5-nest-l"></div>
            <div id="cell-6-nest-l"><input type="text" class="nameStyle1" 
    id="nameInput1" ></div>
        </div>

        <div class="cell-2" id="centerElement" >
            <img 
    src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt="" class="sumNumbers">
        </div>

        <div class="cell-3" id="centerElement" >
            <div id="cell-1-nest"></div>
            <div id="cell-2-nest"></div>
            <div id="cell-3-nest"><h3>their name</h3></div>
            <div id="cell-4-nest"></div>
            <div id="cell-5-nest"><input type="text" class="nameStyle1" 
    id="nameInput2"></div>
            <div id="cell-6-nest"></div>                              
        </div>

        <div class="cell-4" id="result1">
            <input type="date" class="dateStyle1 reset" id="dateInput1"></div>             
            <div class="cell-5"><input type="reset"></div>
            <div class="cell-6" id="result2"> 
            <input type="date" class="dateStyle2" id="dateInput2" placeholder="Their 
    Bday"></div>
            <div class="cell-7"></div>
            <div class="cell-8"></div>
            <div class="cell-9"></div>
        </div>
</form>

Answer 1

你应该调用一个函数来验证你的输入，如果它通过了，你就可以调用你的函数来做你想做的事情了。表单中必须有提交。在阅读您的问题时，您提到使用图像作为提交。您可以使用此<input type="image" src="/Button1.jpg" border="0" alt="Submit" />代替我演示中的按钮。

在这里是一个演示:

​

function validateForm() {
  var x = document.forms["myForm"]["date"].value;
  if (x == "") {
    alert("Date must be filled out");
    return false;
  } else {
    yourfunction();
  }
}

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Date: <input type="date" name="date">
  <input type="submit" value="Submit">
</form>

​