javascript - 如何编辑此函数以仅在输入字段完成时运行？

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>