根据填充的必填字段构建和操作数组

Question

我正在尝试找出一种明智的方式来显示和操作尚未填充到表单中的必填字段数组/列表-这只是为了将此信息输出给用户，并在用户浏览和填充字段时从列表中删除每一项(作为一种进度指示器)。对如何最好地处理这个问题有什么想法吗？

我在想一些事情，大致如下：

var reqFields = [];

jQuery('label.required').each(function() {
    console.log(jQuery(this).text());

    reqFields.push(jQuery(this).text());
});

jQuery('.custom-field').on('input', function() {
    if (jQuery('.required-entry').filter(function() {
            return this.value.length === 0;
        }).length === 0) {
        // Remove this from the list/array
    } else {

    }
});

Answer 1

在输入事件中，检查该值并相应地在数组中添加/删除项。

var reqFields = [];

jQuery('label.required').each(function() {
    console.log(jQuery(this).text());
    reqFields.push(jQuery(this).text());
});

jQuery('.custom-field').on('input', function() {
    if (this.value) {
        // Remove this from the list/array
        reqFields.splice(jQuery(this).index(),1);
        // jQuery(this).index() havent tried, else just compute index some other way
    } else {
       // add back if cleared out
       reqFields.push( jQuery('label.required').eq(jQuery(this).index()).text());
    }
});

Answer 2

每次必填字段的输入发生变化时，您可以简单地将reqFields数组重新分配给输入为空的必填字段列表，而不是删除条目。

var reqFields = [];

jQuery(function() {
  jQuery('.requiredFields').on('input', function() {
    reqFields = jQuery('.requiredFields').filter(function() {
      return this.value.length === 0;
    });
  });
});

Answer 3

检查下面的基本示例，在input上使用each遍历所有具有required-entry类的字段，并检查空字段，最终将消息附加到跨越#msg的字段，以通知用户哪些字段是必需的。

希望这能有所帮助。

​

$('.required-entry').on('input', function() {
    $('#msg').empty();
  
    $('.required-entry').each(function() {
         if ( $(this).val().length == 0 )
             $('#msg').append('Field <b>'+$(this).prev('label').text()+'</b> is required.<br/>');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class='required'>First Name</label>
<input type='text' id='first_name' name='first_name' class='required-entry' required/>
<br/>
<label class='required'>Last Name</label>
<input type='text' id='last_name' name='last_name' class='required-entry' required/>
<br/>
<label class='required'>Email Address</label>
<input type='text' id='email' name='email' class='required-entry' required/>
<hr/>
<br/>
<span id='msg'></span>

​