Question

我有这个有一系列输入的表格。输入1更改输入2的选项。输入2为空白，直到输入一个填充，我需要这样做，如果用户点击输入2尝试填写第一条消息告诉他们请从输入1中选择第一

我当前有jQuery正在做一个警告框，但我怎么能在输入中或右下方显示消息？

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

Answer 2

如果符合条件，您可以通过 after() 动态插入text / html。虽然在这种情况下，更理想的方法是使用public async Task<IActionResult> Login(LoginInputModel model) { if (ModelState.IsValid) { // validate username/password against in-memory store CoreDb.Models.User user = null; if (( user = await _userService.VerifyUser(model.Username, model.Password)) != null) { // var user = _users.FindByUsername(model.Username); await _events.RaiseAsync(new UserLoginSuccessEvent(user.Name, user.Id.ToString(), user.Name)); // only set explicit expiration here if user chooses "remember me". // otherwise we rely upon expiration configured in cookie middleware. var props = new AuthenticationProperties(); if (AccountOptions.AllowRememberLogin && model.RememberLogin) { props.IsPersistent = true; props.ExpiresUtc = DateTimeOffset.UtcNow.Add(AccountOptions.RememberMeLoginDuration); }; props.Items.Add("scheme", AccountOptions.WindowsAuthenticationSchemeName); // issue authentication cookie with subject ID and username await HttpContext.SignInAsync(user.Id.ToString(), user.Name, "idp", props, _userService.GetUserClaims(user).ToArray()); //IEnumerable<ClaimsIdentity> claimsIdentity = null; //var claimsIdentity = new ClaimsIdentity(_userService.GetUserClaims(user), CookieAuthenticationDefaults.AuthenticationScheme); //await HttpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, new ClaimsPrincipal(claimsIdentity)); // make sure the returnUrl is still valid, and if so redirect back to authorize endpoint or a local page if (_interaction.IsValidReturnUrl(model.ReturnUrl) || Url.IsLocalUrl(model.ReturnUrl)) { return Redirect(model.ReturnUrl); } return Redirect("~/"); } await _events.RaiseAsync(new UserLoginFailureEvent(model.Username, "invalid credentials")); ModelState.AddModelError("", AccountOptions.InvalidCredentialsErrorMessage); }而不是focus：

＆＃13;

click

＆＃13;

$( '#two' ).on('focus', function() {
  if (!$('#one').val().length) {
    $('#two').after('<p>Please enter Input 1 First</p>');
  }
});

＆＃13;

Answer 3

在里面添加第一个输入框（作为占位符）：

＆＃13;
＆＃13;
$("#two").click(function() { if ($("#one").val() == "") { $("#one").attr("placeholder", "Please enter Input 1 First"); } });
＆＃13;
<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"> </form>
＆＃13;
＆＃13;
＆＃13;

将其添加为输入下方的消息：

＆＃13;
＆＃13;
$("#two").click(function() { if ($("#one").val() == "") { var newDiv = document.createElement('div'); newDiv.id = "newDiv"; newDiv.innerText = "Please enter Input 1 First"; $("form").append(newDiv, $("#two").next()); } });
＆＃13;
<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"> </form>
＆＃13;
＆＃13;
＆＃13;

如果第一个输入框没有值，if语句将仅显示消息：

if ($("#one").val() == "")

Answer 4

您需要将其附加到父级。

您可以评估第一个输入字段以查看它是否为空。您可以执行许多操作来删除附加的div。

$( "#two" ).click(function() {
  if($("#one").val("")){
   $(this).parent().append("<div>Please enter Input 1  First</div>");
    }
});

将消息添加到输入或输入以下

4 个答案: