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>

如何编辑此功能以仅在输入字段完成后才运行？

1 个答案: