Question

我正在尝试添加一个Class（.error_msg），仅当输入ID为＃＆＃34; #lname＆＃34;留空，通知客户填写。我不想在页面首次加载时出现任何错误消息，但只有在客户点击提交后才会出现。我不确定我在做什么错误的消息是在页面上这是我到目前为止所做的： HTML：

<div id="form_div">
  <form id="form_id">
    <fieldset id="fieldset">
      <div>
        <label for="fname">First Name:</label>
        <input type="text" id="fname" name="fname">
      </div>
      <div>
        <label for="lname">Last Name:</label>
        <input type="text" id="lname" name="lname">
        <p class="error_msg">You must enter a last name</p>
      </div>
</fieldset>
    <br>
    <button type="submit" id="btn_submit">Submit</button>
  </form>
</div>

CSS：

.error_msg {
  display: inline !important;
  color: red;
  font-size: 13px;
  margin-left: 1em !important;
}

jQuery：

  $("#form_div").submit(function(evt) {
    if($('#lname').val() === ''){
      $("#lname").addClass("error_msg");
    }
  });

Answer 1

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btn_submit").click(function(evt) {
                evt.preventDefault();
                if ($('#lname').val() === '') {
                    $("#warning_msg").addClass("error_msg");
                } else {
                    $("#form_id").submit();
                }
            });
        });
    </script>
    <style media="screen">
        .error_msg {
            display: inline !important;
            color: red;
            font-size: 13px;
            margin-left: 1em !important;
        }
    </style>
</head>

<body>
    <div id="form_div">
        <form id="form_id">
            <fieldset id="fieldset">
                <div>
                    <label for="fname">First Name:</label>
                    <input type="text" id="fname" name="fname">
                </div>
                <div>
                    <label for="lname">Last Name:</label>
                    <input type="text" id="lname" name="lname">
                    <p id="warning_msg" style="display:none">You must enter a last name</p>
                </div>
            </fieldset>
            <br>
            <button type="submit" id="btn_submit">Submit</button>
        </form>
    </div>
</body>
</html>

Answer 2

删除＆＃34; error_msg＆＃34; class p tag

<style>
.error_msg {
  color: red;
  font-size: 13px;
  margin-left: 1em !important;
}
</style>

<div id="form_div">
   <form id="form_id">
      <fieldset id="fieldset">
       <div>
           <label for="fname">First Name:</label>
           <input type="text" id="fname" name="fname">
       </div>
       <div>
           <label for="lname">Last Name:</label>
           <input type="text" id="lname" name="lname">
           <p id="error_message" style="display:none;" class='error_msg'>You must enter a last name</p>
       </div>
      </fieldset>
       <br>
       <button type="submit" id="btn_submit">Submit</button>
    </form>
</div>
<script type="text/javascript">
   $( document ).ready(function() {
      $(document).on("submit", "#form_div", function (e) {
          e.preventDefault();
          if($('#lname').val() === ''){
             $("#error_message").css("display", "inline");
             return false;
          }else{
             $("#error_message").css("display", "none");
          }
      });
   });
</script>

如果输入框为空，则提交jQuery addClass

2 个答案: