Question

公开：我一般来说对编码还是很陌生，并且正在尝试自学编码。考虑到这一点，我需要用最详尽的术语来解释我的问题的解决方案，以便我能够理解。

我有一个多步骤表单，可以从W3学校中按字面意思复制。表单的原始JavaScript非常基础，仅用于在继续下一步之前验证<input>字段是否已填写。

 function validateForm() {
  // This function deals with validation of the form fields
 var x, y, i, valid = true;
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");
    // z = document.getElementById("turnaround")[y];
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    } 
  }

最初，我尝试使用无线电输入。其中一个带有收音机，带有输入日期属性，但是，我不知道如何制作它，因此只需要选择一个收音机，如果选择了日期收音机，则必须将日期设为填写。

所以我选择了选择。这似乎更容易，但是我无法弄清楚如何对JavaScript / jquery进行编码，以确保在用户进入表单的下一个选项卡/步骤之前进行了选择。目前，用户可以继续进行下一步操作，甚至可以提交表单，而无需填写第一个选项卡。我尝试了很多不同的方法，但是没有任何效果，因此我几乎可以使用任何脚本，但这是所选内容的html：

<div class="tab" id="turnaround">
    <!--remember to add code that links the radio to the date, and requires at least one feild to be answered-->
    <h4>What’s the latest time you need your project (this does not include potential revisions)?</h4>
    <p><label for="month">month</label>
        <select id="month" name="month"  class="1-12" oninput="this.className = ''">
            <option disabled selected value>select one</option>
            <option>any month</option>
        </select> 
        <label for="day">day</label>
        <select id="day" name="day"  class="1-31" required aria-required="true" oninput="this.className = ''">
            <option disabled selected value>select one</option>
            <option>any day</option>
        </select>
        <label for="year">year</label>
        <select id="year" name="year"  class="year" required aria-required="true" oninput="this.className = ''">
            <option disabled selected value>select one</option>
            <option>any year</option>
        </select><!--<input type="date" id="date-fill"> time (optional) <input type="time" id="time-fill">--></p>
    <h4>What’s your budget for the project?</h4>
            <select id="budget" name="budget"  class="budget" required aria-required="true" oninput="this.className = ''">
            <option disabled selected value>select one</option>
            <option>item minimum cost</option>
            <option>any hourly rate ($30/hour)</option>
            <option>limited hours, hourly rate ($30/hour</option>
        </select>
    </div>

fyi，有一个用于选择<option></option>的jquery，例如：

$(function(){
    var $select = $(".1-31");
    for (i=1;i<=31;i++){
        $select.append($('<option></option>').val(i).html(i));
    }
});

我在使用<textarea>时也遇到了问题。我想要求用户至少填写几个有关所问问题的句子。

主要问题是如何确保在用户进入下一个选项卡之前进行选择。广播问题和文本区域问题的答案也将很好。

谢谢！

验证是否在表单的当前选项卡上进行选择

0 个答案: