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

通过检查select元素的<select>的结果，可以像验证<input />元素一样验证.val()元素。

要记住的一点是，<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

以下方法应该起作用：

service docker start

循环选择字段并进行验证

2 个答案: