javascript - 将消息添加到输入或下方

Question

我有一个包含一系列输入的表单。输入 1 更改输入 2 的选项。输入 2 为空，在输入 1 填满之前，我需要这样做，以便如果用户单击输入 2 尝试先填写，则会显示一条消息，告诉他们请从输入 1 中选择首先。

我目前有 jQuery 正在执行警报框，但如何才能让消息显示在输入中或其正下方？

代码笔:https://codepen.io/anon_guy/pen/WXgZQw

HTML:

<form>
  Input-1:<br>
  <input type="text" name="first" id="one"><br>
  Input-2:<br>
  <input type="text" name="second" id="two" >
</form>

jQuery:

$( "#two" ).click(function() {
  alert( "Please enter Input 1 First" );
});

Answer 1

只有在输入 1 收到值后才启用输入 2，这会更有意义，并且会提供更好的用户体验。您可以使用 input 事件来做到这一点，如下所示:

$('#one').on('input', function() {
  $('#two').prop('disabled', this.value.trim() == '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Input-1:<br>
  <input type="text" name="first" id="one"><br>
  Input-2:<br>
  <input type="text" name="second" id="two" disabled="disabled">
</form>