jQuery 如果输入框为空则在提交时添加类

Question

我试图添加一个Class (.error_msg) 仅当ID为“#lname”的输入留空时，通知客户填写。我不' 想要在页面首次加载时出现任何错误消息，但它必须仅在客户端单击提交后出现。我不确定我在做什么错误消息在页面上这是我到目前为止所做的： 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

删除 "error_msg" class p 标签

<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 如果输入框为空则在提交时添加类

jQuery addClass on submit if input box empty

forms

jquery

input

submit