Xây dựng và thao tác mảng dựa trên các trường bắt buộc được điền

Question

Tôi đang cố gắng tìm ra một cách hợp lý để hiển thị và thao tác một mảng/danh sách các trường bắt buộc chưa được điền vào biểu mẫu - điều này chỉ để tôi có thể xuất thông tin này cho người dùng và xóa từng mục khỏi danh sách khi người dùng đi qua và điền vào các trường (dưới dạng chỉ báo tiến trình). Bất kỳ suy nghĩ về cách tốt nhất để xử lý này?

Tôi đang nghĩ đến một cái gì đó dọc theo dòng trong các cách sau:

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

Mở sự kiện đầu vào kiểm tra giá trị và phù hợp thêm/xóa mục trong mảng.

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

Thay vì loại bỏ các mục, mỗi khi có một sự thay đổi trong đầu vào của các trường bắt buộc, bạn có thể chỉ đơn giản là tái gán mảng reqFields vào danh sách các trường bắt buộc với đầu vào trống.

var reqFields = []; 

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

Answer 3

Kiểm tra ví dụ cơ bản này dưới đây sử dụng each trên input để lặp qua tất cả các lĩnh vực với lớp required-entry và kiểm tra những sản phẩm nào để cuối cùng thêm nhắn để span #msg để thông báo cho người sử dụng mà trường được yêu cầu.

Hy vọng điều này sẽ hữu ích.

---

$('.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>