Как изменить фон div (например, индикатор выполнения), когда пользователь закончил ввод формы?

Question

Я хочу изменить фон div, когда пользователь заполняет все входные данные в части формы. Можно ли как-нибудь это сделать, кроме как поместить в нее кнопку и нажать эту кнопку, чтобы изменить фон

.step-dots div {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: #d9d9d9;
    margin-left: 6px;
}

<form action="">
        <div class="row">
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="" name="text-group" checked>
            </div>
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="" name="text-group">
            </div>
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="" name="text-group">
            </div>
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="" name="text-group">
            </div>
        </div>
</form>
<div class="step-dots">
        <div></div>
        <div></div>
        <div></div>
</div>

Answer 1

Вы можете использовать blur событие, проверить входное значение и на основании этого добавить / удалить свой класс div.

$("input").blur(function() {
  let Counter = true;
  $('[name="text-group"]').each(function() {
    if (this.value == '') {
      Counter = false;
      return false;
    }
  });
  if (Counter) {
    $('.step-dots div').addClass('divColor');
  } else {
    $('.step-dots div').removeClass('divColor');
  }

});

.step-dots div {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: #d9d9d9;
  margin-left: 6px;
}

.divColor {
  background: red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <div class="row">
    <div class="col-lg-3">
      <label for="">Apple</label>
      <input type="text" id="" name="text-group" checked>
    </div>
    <div class="col-lg-3">
      <label for="">Apple</label>
      <input type="text" id="" name="text-group">
    </div>
    <div class="col-lg-3">
      <label for="">Apple</label>
      <input type="text" id="" name="text-group">
    </div>
    <div class="col-lg-3">
      <label for="">Apple</label>
      <input type="text" id="" name="text-group">
    </div>
  </div>
</form>
<div class="step-dots">
  <div></div>
  <div></div>
  <div></div>
</div>

Альтернатива:

Вы также можете использовать keup вместо blur .Выбор за вами, и это зависит от ваших потребностей.

Answer 2

Вы должны добавить шаговые точки как количество полей ввода в форме.

$(document).ready(function() {

	// Loop through each Input field
	$('input[type="text"]').each(function(index, el) {

		// If Input field don't have ID, assign Input Index number as a ID of it's Step dot
		if ($(this).attr('id') == '') {
			$(this).attr('id', index);

			// Add step dots dynamically as amount of Input fields
			$(this).parents('form').siblings('.step-dots').append('<div data-target='+index+'></div>');
		}

		// If Input field have ID, assign Input ID as a ID of it's Step dot
		else{

			// Add step dots dynamically as amount of Input fields
			$(this).parents('form').siblings('.step-dots').append('<div data-target='+$(this).attr('id')+'></div>');
		}
	});

	// Check Input field value then change background color if any value in it
	$('input[type="text"]').on('keyup', function(event) {
		event.preventDefault();

		// If input field is not blank, step dot has background color 
		if ($(this).val() != '') {
			$('.step-dots').find('[data-target="'+$(this).attr('id')+'"]').css('background', 'red');
		}

		// If input field is blank, step dot hasn't background color
		else{
			$('.step-dots').find('[data-target="'+$(this).attr('id')+'"]').removeAttr('style');
		}
	});
});

.step-dots div {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 100%;
	background: #d9d9d9;
	margin-left: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
	<div class="row">
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group" checked>
		</div>
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group">
		</div>
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group">
		</div>
		<div class="col-lg-3">
			<label for="">Apple</label>
			<input type="text" id="" name="text-group">
		</div>
	</div>
</form>
<div class="step-dots">
</div>

Answer 3

function checkFilled() {
	var inputVal = document.getElementById("textinput");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "red";
    }
    else{
        inputVal.style.backgroundColor = "";
    }
}
 
checkFilled();

.step-dots div {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: #d9d9d9;
    margin-left: 6px;
}

<form action="">
        <div class="row">
            <div class="col-lg-3">
                <label for="">Apple</label>
                <input type="text" id="textinput" name="text-group" onchange="checkFilled();">
            </div>
         </div>
</form>
<div class="step-dots">
        <div></div>
        <div></div>
        <div></div>
</div>