Проверка формы на кол-во символов JS [закрыт]

250

06 сентября 2018, 07:30

Есть форма с логином и паролем. Поле с паролем закрыто и должно открыться после ввода 5 символов в поле с логином, а кнопка входа открыться после заполнения 5 символов в поле логина и пароля. Как это организовать на js (jquery)?

Answer 1

Можно так:

function checkCount() { 
		 
$("#password").attr("disabled", true) 
$("#button").attr("disabled", true) 
 
if ($("#login").val().length > 5) { 
	$("#password").removeAttr("disabled") 
			 
	if ($("#password").val().length > 5) { 
		$("#button").removeAttr("disabled") 
	} 
} 
		 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="login" id="login" placeholder="Login" onkeydown="checkCount()" onkeyup="checkCount()"> 
 
<input type="text" name="password" id="password" placeholder="Password" onkeydown="checkCount()" onkeyup="checkCount()" disabled="disabled"> 
 
<button id="button" disabled="disabled">Submit</button>

Answer 2

$(function() { 
  $(document).on('input', 'input[type="text"]', function() { 
    if ($(this).val().length > 5) { 
      $('input[type="password"]').removeAttr('disabled'); 
    } else { 
      $('input[type="password"]').attr('disabled', 'disabled'); 
    } 
  }); 
  $(document).on('input', 'input[type="password"]', function() { 
    if ($(this).val().length > 5) { 
      $('input[type="submit"]').removeAttr('disabled'); 
    } else { 
      $('input[type="submit"]').attr('disabled', 'disabled'); 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
  <input type="text"> 
  <input type="password" disabled> 
  <input type="submit" disabled> 
</form>