Javascript 使html选择元素成为必需的

我有一个Html表单，我需要将表单中的

元素设置为必需的，现在我的脚本只验证

元素，而忽略

$（文档）.ready（函数（）{
$（'.registration form fieldset:first child'）.fadeIn（'slow'）；
$（'.registration form input[type=“text”]'）。在（'focus'，函数（）{
$（this.removeClass（'input-error'）；
});
//下一步
$（'.registration form.btn next'）。在（'click'，函数（）{
var parent_fieldset=$（this）.parents（'fieldset'）；
var next_step=true；
父字段集.find（'input[type=“text”]、input[type=“email”]”）。每个（函数（）{
if（$（this）.val（）==“”）{
$（this.addClass（'input-error'）；
下一步=假；
}否则{
$（this.removeClass（'input-error'）；
}
});
如果（下一步）{
父字段集。淡出（400，函数（）{
$（this.next（）.fadeIn（）；
});
}
});
//上一步
$（'.registration form.btn previous'）。在（'click'，函数（）{
$（this）.parents（'fieldset'）.fadeOut（400，function（）{
$（this.prev（）.fadeIn（）；
});
});
//提交
$（'.registration form'）。在（'submit'，函数（e）上{
$（this）.find（'input[type=“text”]，input[type=“email”]”）。每个（函数（）{
if（$（this）.val（）==“”）{
e、 预防默认值（）；
$（this.addClass（'input-error'）；
}否则{
$（this.removeClass（'input-error'）；
}
});
});
});

您可以使用

字段中的

required

属性，在

HTML5

中创建所需的输入字段，如下所示

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>

---

请尝试选择的

.selectedIndex

属性。您的第一个

应该为空，然后验证selectedIndex是否不是0。

Input type=“text”字段正在由我使用的脚本验证。我还需要验证脚本没有执行的操作。我需要在我的应用程序中验证元素的设置form@Myprepaycellular我已使用js代码更新了我的答案，以验证selectI我尝试实现您的解决方案，但仍然无法验证，我相信我需要在此处添加一些内容“”“parent_fieldset.find（'input[type=“text”]、input[type=“email”]”）我给出的添加独立于jQuery。如果有多个选择字段，则需要使用

document.querySelectorAll（'select'）

然后在节点间循环。由于我有多个选择字段，因此实现了更改，但它仍然无法验证选择字段，而且所有其他元素都被设置为必需，即使我在其中输入条目并单击“下一步”。

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

// 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();
        });
    }

});