'Duplicated Error Messages when button clicked

JSFIDDLE
(UPDATED 4/2/2022)

When I click Contact Me link, the jQuery trigger did not SLIDEDOWN to open and SLIDEUP to close the form class="box", but instead it just show and hide instead. Im not sure where I should put the CDN jQuery link in HTML.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

$(document).ready(function() {
  $("#contactMe").on("click", function() {
    if ($(".box").is(":hidden")) {
      $(".box").slideDown("fast"); 
    } else {
      $(".box").slideUp("fast"); 
    }
  });
});

$(document).ready(function() {
  $(".closebtn").on("click", function() {
    $(".box").slideUp("fast");
  });
});

HEADER IN HTML

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/mediadev.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Resume</title>
</head>

FORM BOX HTML

<div class="box" style="display: none;">
    <div class="info">
      <div class="frm-details">
        <div class="frm-name">LET'S WORK TOGETHER!</div>
        <div class="form-box">
          <div class="frm-header">Let me know what you need!<br> I want to help!</div>
          <div class="frm-error-msg">Please fill in the missing field(s).</div>
          <div class="frm-suc-msg">
            <div class="closebtn">x</div>
            <span class="ty">THANK YOU!</span><br> I will get back to you ASAP!
          </div>
          <div class="frm-group">
            <input name="frm-fname" type="text" id="frm-fname">
            <span class="frm-highlight"></span>
            <span class="frm-bar"></span>
            <label>Full Name:</label>
          </div>
          <div class="frm-group">
            <input name="frm-email" type="email" id="frm-email">
            <span class="frm-highlight"></span>
            <span class="frm-bar"></span>
            <label>Email:</label>
          </div>
          <div class="frm-group">
            <input name="frm-company" type="text" id="frm-company">
            <span class="frm-highlight"></span>
            <span class="frm-bar"></span>
            <label>Company Name:</label>
          </div>
          <div class="frm-group">
            <textarea name="frm-comment" rows="3" id="frm-comment"></textarea>
            <span class="frm-highlight"></span>
            <span class="frm-bar"></span>
            <label>Message:</label>
          </div>
          <div id="mail-status">
            <button type="submit" name="frm-submit" class="btn-submit" onclick="sendContact()">SEND</button>
          </div>
          <!--</form>-->
        </div>
      </div>
    </div>
  </div>
jquerycdn


Solution 1:[1]

Your code is always showing the "thank you" message, and only showing the error message when there is an error.

I think you want it to work like this: if there are errors, show the error message (.frm-error-msg), otherwise show the "thank you" message (.frm-suc-msg).

There is also a lot of redundancy in your error checking (repeated calls to $(".frm-error-msg").show() and valid = false) which I've factored out.

You are also checking for blank fields by testing them with the Boolean "not" operator (!), which doesn't work the way you think. If you want to test for an empty field ("empty" meaning consists of nothing but zero or more whitespace characters), the best way is to use a regular expression.

Also, there are better ways than the regexp you are currently using to validate an email address.

function validateContact() {
  var valid = true;

  if (
    $("#frm-fname").val().match(/^\s*$/)
      ||
    $("#frm-email").val().match(/^\s*$/)
      ||
    !$("#frm-email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)
      ||
    $("#frm-company").val().match(/^\s*$/)
      ||
    $("#frm-comment").val().match(/^\s*$/)
  ) {
    valid = false;
  }

  if (valid) {
    $(".frm-suc-msg").show();  // SHOWS 'THANK YOU' MESSAGE
  } else {
    $(".frm-error-msg").show(); // SHOWS 'PLEASE FILL...' MESSAGE
  }

  return valid;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions