使html选择元素是必需的

Question

我有一个Html表单，我需要在我的表单中生成<select>元素是必需的，截至目前我的脚本只验证<input type="text">元素并忽略<select>

<script>
$(document).ready(function () {
$('.registration-form fieldset:first-child').fadeIn('slow');

$('.registration-form input[type="text"]').on('focus', function () {
    $(this).removeClass('input-error');
});

// next step
$('.registration-form .btn-next').on('click', function () {
    var parent_fieldset = $(this).parents('fieldset');
    var next_step = true;

    parent_fieldset.find('input[type="text"],input[type="email"]').each(function () {
        if ($(this).val() == "") {
            $(this).addClass('input-error');
            next_step = false;
        } else {
            $(this).removeClass('input-error');
        }
    });

    if (next_step) {
        parent_fieldset.fadeOut(400, function () {
            $(this).next().fadeIn();
        });
    }

});

// previous step
$('.registration-form .btn-previous').on('click', function () {
    $(this).parents('fieldset').fadeOut(400, function () {
        $(this).prev().fadeIn();
    });
});

// submit
$('.registration-form').on('submit', function (e) {

    $(this).find('input[type="text"],input[type="email"]').each(function () {
        if ($(this).val() == "") {
            e.preventDefault();
            $(this).addClass('input-error');
        } else {
            $(this).removeClass('input-error');
        }
    });

});


});
</script>

Answer 1

尝试选择的.selectedIndex属性。你的第一个<option>应为空，然后只验证selectedIndex是否不是0。

Answer 2

你可以使用HTML5字段中的required属性在<input >中创建一个输入字段，就像这样

HTML

<form method="#">
  <input id="email" type="email" required >
  <input id="password" type="password" required >
  <select name="select" id="select" required>
     <option value="Select an option" disabled selected></option>
  </select>
</form>

您需要将输入包装在表单中

JS

// next step
$('.registration-form .btn-next').on('click', function () {
    var parent_fieldset = $(this).parents('fieldset');
    var next_step = true;

    parent_fieldset.find('input[type="text"],input[type="email"]').each(function () {
        if ($(this).val() == "") {
            $(this).addClass('input-error');
            next_step = false;
        } else {
            let selectVal = document.querySelector('select').value;
            if (selectVal && selectVal.length >= 1) {
               // passed
               $(this).removeClass('input-error');
            }
            else {
              // failed
              $(this).addClass('input-error');
              next_step = false;
            }
        }
    });

    if (next_step) {
        parent_fieldset.fadeOut(400, function () {
            $(this).next().fadeIn();
        });
    }

});