Duplicated Error Messages when button clicked

Question

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>

Do not use links to external sites to host content that is integral to your question. Include all the information necessary to create a [mcve] in the actual question itself. — Tibrogargan, Apr 03 '22 at 02:49
You're still not including something that can be used to reproduce the problem. There's a number of HTML elements that this code refers to that aren't included in the question. Since your HTML may be contributing to the problem, please include it. — Tibrogargan, Apr 03 '22 at 03:09

kmoser · Answer 1 · 2022-04-03T03:29:33.847

0

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

edited Apr 03 '22 at 03:29

answered Apr 03 '22 at 03:14

kmoser

8,780
3
24
40

That worked! THANK YOU! Right now Im trying to figure out where to place the jQuery CDN link in HTML to make the SlideUp() and SlideDown() to work. – Christian Luneborg Apr 03 '22 at 04:13
Links to the jQuery CDN should come before the first reference to jQuery code. So preferably in the `` section. – kmoser Apr 03 '22 at 04:15
I moved the jQuery CDN in the head tag and it didnt work. – Christian Luneborg Apr 03 '22 at 04:22
Without seeing your code it's difficult to tell why. "It didn't work" doesn't tell me much. Are there console errors? What other symptoms? – kmoser Apr 03 '22 at 04:22
No errors in JS Console. Is the CDN outdated? I used the latest version. I updated the code above. https://jsfiddle.net/magnix2k/x043dj7t/30/ - I tested it on JSFiddle and it works OK – Christian Luneborg Apr 03 '22 at 04:26
What exactly is not working? Your JSFiddle seems to work. – kmoser Apr 03 '22 at 04:29
Good morning, @kmoser! I tested on JSFiddle to see if the jQuery sliding works on https://jsfiddle.net/magnix2k/coy6Lf2s/1/ and it works. I think it tells me the CDN link does not work in the head tag. I tried to move it in the body tag and down to the footer inside the body tag - no luck. This is werid! – Christian Luneborg Apr 03 '22 at 14:57
It doesn't matter whether the CDN link is in the `` or `` section, as long as it comes before your first jQuery code. If it's working on JSFiddle, but not somewhere else, then it's the "somewhere else" that is the problem. Without seeing that other code, or at least a minimal reproducible example of the problem, I can't help. – kmoser Apr 03 '22 at 15:42

Duplicated Error Messages when button clicked

1 Answers1