Проверить, сделан ли выбор на текущей вкладке в форме - PullRequest
Новая
       8

Проверить, сделан ли выбор на текущей вкладке в форме

0 голосов
/ 10 ноября 2018

РАСКРЫТИЕ ИНФОРМАЦИИ: Я совсем новичок в кодировании в целом и пытаюсь научить себя программировать. Имея это в виду, мне нужно, чтобы решение моей проблемы было объяснено в самых грубых терминах, чтобы я мог понять.

У меня есть многошаговая форма, которую я буквально скопировал из школ 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>

Кстати, есть JQuery для выбора <option></option> Пример: 

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

У меня тоже была проблема, связанная с <textarea>. Я хотел потребовать от пользователя заполнить хотя бы пару предложений относительно задаваемого вопроса.

Основной вопрос - как сделать выбор, прежде чем пользователь сможет перейти к следующей вкладке. Ответы на проблему с радио и текстовые сообщения также были бы хорошими.

Заранее спасибо!

...