jQuery addClass on submit if input box empty

Question

I am trying to add a Class (.error_msg) only if the input with the ID "#lname" is left blank, to notify the client to fill it in. I don't want any error message when the page first loads, but it has to appear only after the client clicked on submit. I am not sure what I am doing wrong message is on the page This is what I did so far: 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>

The CSS:

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

The jQuery:

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

C. Smith · Accepted Answer · 2017-01-05 13:48:22Z

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>

edited Jan 5, 2017 at 13:48

answered Jan 5, 2017 at 12:48

C. Smith

4112 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alessandro Over a year ago

Thanks for your solution. Actually I am trying to say: when clicked on submit show the warning text next to the box if last name field's empty, otherwise keep the warning text hidden and let the form be submitted. Can't wrap my head around it.

C. Smith Over a year ago

Please see my updated answer. This hides your warning div until the button is clicked. If the field is empty it will show the warning.

Rahman · Accepted Answer · 2017-01-06 05:15:08Z

0

Remove the "error_msg" 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>

edited Jan 6, 2017 at 5:15

answered Jan 5, 2017 at 12:51

Rahman

2821 silver badge11 bronze badges

2 Comments

Alessandro Over a year ago

thanks, I tried your solution, but if I remove the p tag, then I don't have any message next to the box. If I put it back instead, the text its still there as soon as the page load. I need it to pop in only after submit its clicked and only if the box is empty. Otherwise should remain hidden.

Rahman Over a year ago

I have edit the answer. you have to remove the p tage "display:inline;" style. add "display:none;" for p tag with update id and class "error_message" change the style attribute while check

Collectives™ on Stack Overflow

jQuery addClass on submit if input box empty

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related