jQuery addClass submit on empty入力ボックスが空の場合

ID "#lname"の入力が空白のままである場合にのみ、クラス（.error_msg）を追加しようとしています。ページが最初に読み込まれたときにエラーメッセージが表示されますが、クライアントがsubmitをクリックした後にのみ表示される必要があります。 HTML：：jQuery addClass submit on empty入力ボックスが空の場合

<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"); 
    } 
    });

を私はこれは私がこれまでにやったことあるページ上にあるもの、私は間違ったメッセージをやっているかわかりません

出典

2017-01-05 Alessandro

<!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>

出典

2017-01-05 12:48:23

あなたのソリューションに感謝します。実際に私は言いたいことがあります：送信時にクリックすると、姓フィールドが空の場合は警告テキストがボックスの横に表示され、そうでない場合は警告テキストが非表示になり、フォームが送信されます。私の頭を包み込むことはできません。 – Alessandro

最新の回答をご覧ください。これは、ボタンがクリックされるまで警告divを非表示にします。フィールドが空の場合、警告が表示されます。 –

ありがとうC.スミス - それはうまく動作します。 – Alessandro

"error_msg"クラスpタグ

を削除してください210

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

出典

2017-01-05 12:51:01 Rahman

ありがとう、私はあなたのソリューションを試しましたが、pタグを削除すると、ボックスの隣にメッセージが表示されません。私が代わりにそれを置くと、ページが読み込まれるとすぐにそこにテキストが残っています。私はそれがクリックされた後にのみ、ボックスが空である場合にのみポップする必要があります。それ以外の場合は隠しておく必要があり – Alessandro

私は答えを編集しています。 "display：inline;"を削除する必要があります。スタイル。 "display：none;"を追加します。更新IDとクラス "error_message"を持つpタグの場合、チェック中にスタイル属性を変更する – Rahman

jQuery addClass submit on empty入力ボックスが空の場合

答えて

関連する問題