Прокрутите выбор из полей и подтвердите - PullRequest
Новая
       5

Прокрутите выбор из полей и подтвердите

0 голосов
/ 07 февраля 2019

Я пытаюсь пройтись по нескольким текстам и выбрать поля в форме и проверить, что они получили ответы.

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

<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>

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Должно работать следующее: 

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;
0 голосов
/ 07 февраля 2019

Вы можете проверять элементы <select> почти так же, как элементы <input />, изучая результат .val() элемента 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>

Надеюсь, это поможет!

...