循环从字段中选择并验证

Question

我正在尝试遍历多个文本并选择表单中的框并验证它们已被回答。

我已使用以下代码循环遍历文本框，但可以弄清楚如何在选择框上执行类似操作。

<form name="Form1"></form>
    <label>Question 1</lable>
    <input type="text" class="required" name="question1">

    <label>Question 2</lable>
    <select class="required" name="question3">
        <option value="0">a</option>
        <option value="1">b</option>
        <option value="2">c</option>
        <option value="3">d</option>   
    </select>
    <button role="button"id="Go">Go</button>';
</form>


<script>
(function (){
    $('#Go').on('click', function(e){
        e.preventDefault();
        genericValidationText('form[name="Form1"]');
        genericValidationSelect('form[name="Form1"]');
    });
}());

function genericValidationText (formName) {
    document.forms.noValidate = true;
    var notValid;

    // PERFORM GENERIC CHECKS
    // INPUT form fields
    $(formName + ' *').filter(':input').each(function(){
        var formElement = formName + ' input[name="'+ (this.name) + '"]' ;
        performValidation(formElement);
    });

    function performValidation(formElement){
        if ($(formElement).hasClass('required')) {

            notValid = false;
            if (!($.trim($(formElement).val()))){
                notValid = true;
            };

            if (notValid === true) {
                showErrorMessage(formElement);
            };
        };
    }
}


function genericValidationSelect (formName) {
?????
}
</script>

Answer 1

您可以通过检查选择元素的.val() 的结果，以与<input /> 元素大致相同的方式验证<select> 元素。

要记住的是，<select> 默认有一个值（对应于用户最初在浏览器中可见的<option>）。这实际上会导致对<select> 的验证通过（即使用户没有明确选择选择选项）。

要解决此问题，请考虑将默认 <option> 添加到 <select>，如下所示：

 <option selected disabled>Please select something</option>

添加此选项意味着<select> 上的验证将失败，直到用户通过选择有效选项实际与<select> 互动（之后，选择上的验证将通过）：

(function() {
  /* Consider using submit on form, rather than a click event 
  listener on the Go button */
  $('form[name="Form1"]').submit(function(e) {
    e.preventDefault();
    /* Exclude call to genericValidationText() for
    this snippet to simplify it
    genericValidationText('form[name="Form1"]');
     */
    genericValidationSelect('form[name="Form1"]');
  });
}());

function genericValidationSelect(formName) {
  
  let notValid = false;
  
  /* Iterate each select in the form */
  $('select', formName).each(function() {
    
    /* Check value in similar way. If null value, 
    then consider the select invalid */
    var selectedOption = $(this).val();
    if (selectedOption === null) {
      notValid = true;
    }
  });

  if(notValid) {    
      alert('Please select an option');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Fixed : remove closing form tag -->
<form name="Form1">
  <!-- Fixed : typo -->
  <label>Question 1</label>
  <input type="text" class="required" name="question1">
  <label>Question 2</lable>
    <select class="required" name="question3">
        <!-- Added default "no value option" to demonstrate validation -->
        <option selected disabled>Please select something</option>
        <option value="0">a</option>
        <option value="1">b</option>
        <option value="2">c</option>
        <option value="3">d</option>   
    </select>
    <button role="button"id="Go">Go</button>
</form>

希望这会有所帮助！

Answer 2

以下应该有效：

const changeEventHandler = e => {
    const value = e.target.options[e.target.selectedIndex].value;
    console.log(value); //Validate value...
}

const select = document.querySelector('select[name=question3]').onchange = changeEventHandler;