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

使用each上的input检查此基本示例以循环浏览类required-entry的所有字段，并检查空字段，最后将消息附加到范围#msg告知用户需要哪些字段。

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: