Question

我只是在填充所有文本区域后尝试在视口上显示一条消息。现在，即使第一个名称字段尚未被验证，单击页面上的按钮时会立即显示myMessage。如何使myMessage仅出现在＆＃34; First Name＆＃34;的表单元素上。由用户填写？

＆＃13;

$(document).ready(function() {
  $("#submitinfo").click(function() {
    var myFirstName = $("#first_name").val().trim();
    if (!myFirstName) {
      $("#first_error").html("You must Enter a First Name");
      $('#first_name').focus();
    } else {
      $("#first_error").html("");
    }
    $("#message").css('background-color', 'red');
    var myMessage = "Your name is " + myFirstName;
    $("#message").html(myMessage);
    return false;
  });

});

＆＃13;

<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name"> <span class="error" id="first_error"></span>
<input type="button" id="submitinfo" value="Submit">
<span class="message" id="message"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

Answer 1

将myMessage代码放在else块中。如果#message为真，您还希望删除!myFirstName的内容。

Answer 2

目前，只有当用户通过在其他部分中移动消息块来输入输入字段中的内容时，用户单击按钮而不是该显示时才显示消息

＆＃13;

$(document).ready(function() {
  $("#submitinfo").click(function() {
    var myFirstName = $("#first_name").val().trim();
    if (!myFirstName) {
      $("#first_error").html("You must Enter a First Name");
      $('#first_name').focus();
      $("#message").html("");
    } else {
      $("#first_error").html("");
    $("#message").css('background-color', 'red');
    var myMessage = "Your name is " + myFirstName;
    $("#message").html(myMessage);
    }
    
    return false;
  });

});

＆＃13;

<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name"> <span class="error" id="first_error"></span>
<input type="button" id="submitinfo" value="Submit">
<span class="message" id="message"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

仅在使用jQuery验证时显示消息

2 个答案: