Home > OS >  Why jQuery isn't applying specific style on valid input?
Why jQuery isn't applying specific style on valid input?

Time：11-19

In the example below the expected behavior is that once the form field has valid input, a specific class is applied, which pushes the input label to sit mid-line of the form field's border. You can see this when you navigate to each input.

When a field is validated, that class, valid-ct is applied and it's supposed to remain there and keep that label above the input. But, as I navigate to each field, the class, valid-ct goes away and the label goes back into the placeholder position, covering any input.

I believe the culprit is in this function, but I am not getting any errors, so I'm not sure what I'm doing wrong:

$(function () {
  $("input, textarea").bind("ClassChanged", function () {
    $(this).parent().removeClass("valid-ct error-ct");
    // console.log(!$.trim($(this).val()));
    if ($(this).hasClass("error")) {
      $(this).parent().addClass("error-ct");
    } else if ($(this).hasClass("valid") && $.trim($(this).val())) {
      $(this).parent().addClass("valid-ct");
    } else if ($(this).hasClass("error terms-agree")) {
      console.log(123);
    }
  });
});

Where am I going wrong with this?

(function () {
  var originalAddClassMethod = jQuery.fn.addClass;
  jQuery.fn.addClass = function () {
    // Execute the original method.
    var result = originalAddClassMethod.apply(this, arguments);
    // trigger a custom event
    jQuery(this).trigger("ClassChanged");
    // return the original result
    return result;
  };
})();
$(function () {
  $("input, textarea").bind("ClassChanged", function () {
    $(this).parent().removeClass("valid-ct error-ct");
    // console.log(!$.trim($(this).val()));
    if ($(this).hasClass("error")) {
      $(this).parent().addClass("error-ct");
    } else if ($(this).hasClass("valid") && $.trim($(this).val())) {
      $(this).parent().addClass("valid-ct");
    } else if ($(this).hasClass("error terms-agree")) {
      console.log(123);
    }
  });
});
$("input.required, textarea.required").trigger("ClassChanged");

$(".request-form .form-ct a.company-btn--blue").on("click", function (e) {
  e.preventDefault();
  $("#footer-form-submit").submit();
});

$("input").on("focus blur", function () {
  $(this).parent().toggleClass("focus-ct");
});

// Create a custom classChange trigger
(function () {
  var originalAddClassMethod = jQuery.fn.addClass;

  jQuery.fn.addClass = function () {
    // Execute the original method.
    var result = originalAddClassMethod.apply(this, arguments);

    // trigger a custom event
    jQuery(this).trigger("ClassChanged");

    // return the original result
    return result;
  };
})();
$(function () {
  $("input").bind("ClassChanged", function () {
    $(this).parent().removeClass("valid-ct error-ct");
    // console.log(!$.trim($(this).val()));
    if ($(this).hasClass("error")) {
      $(this).parent().addClass("error-ct");
    } else if ($(this).hasClass("valid") && $.trim($(this).val())) {
      $(this).parent().addClass("valid-ct");
    } else if ($(this).hasClass("error terms-agree")) {
      console.log(123);
    }
  });
});

$("input.required").trigger("ClassChanged");
.container {
  padding: 0.5rem;
}

.request-form h2 {
  margin: 80px auto 56px;
  max-width: 768px;
  font-weight: 800;
}

.request-form h2 span {
  color: #005fec;
  font-weight: 800;
}

@media screen and (min-width: 768px) {
  .request-form h2 {
    margin-bottom: 72px;
    text-align: center;
  }
}
.request-form .container .row h4.sub-head {
  margin-bottom: 2.5rem;
  margin-top: 0;
}

.request-form input[type="text"],
.request-form input[type="email"],
.request-form input[type="tel"],
.request-form input[type="number"] {
  background-color: #fff;
  border: 0;
  font-size: 20px;
  width: 100%;
  height: 60px;
  cursor: auto;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  transition: background-color 0.4s;
  border: 1px solid #6d7582;
  padding: 0 16px;
  border-radius: 4px;
}

.request-form input:-webkit-autofill {
  box-shadow: 0 0 0 50px white inset;
  -webkit-box-shadow: 0 0 0 50px white inset;
  -webkit-text-fill-color: #333;
}

.request-form input:-webkit-autofill:focus {
  box-shadow: 0 0 0 50px white inset;
  -webkit-box-shadow: 0 0 0 50px white inset;
  -webkit-text-fill-color: #333;
}

.request-form .email-ct {
  margin-right: 12px;
}

.request-form .phone-ct {
  margin-left: 12px;
}

.request-form .input-ct {
  position: relative;
  margin-top: 24px;
  width: 100%;
}

.fandlname {
  display: flex;
}

.fandlname .first-name-ct {
  margin-right: 12px;
}

.fandlname .last-name-ct {
  margin-left: 12px;
}

.request-form .input-ct label:not(.error) {
  color: #444a53;
  position: absolute;
  top: 22px;
  left: 8px;
  background-color: #fff;
  padding: 0 8px;
  font-weight: 300;
  font-size: 16px;
  transition: all 200ms ease-in-out;
  pointer-events: none;
  z-index: 1;
}

.request-form .state-search-ct.error-ct.input-ct label {
  top: 22px;
}

.state-search-ct.valid-ct label.error {
  display: none !important;
}

.request-form .input-ct.focus-ct label:not(.error) {
  color: #005fec !important;
  font-family: motiva-sans, sans-serif;
  top: -13px;
  z-index: 1;
}

.request-form .input-ct.focus-ct label.error {
  display: none !important;
}

.request-form .input-ct input:focus,
.request-form .input-ct textarea:focus {
  border-color: #005fec !important;
}

.request-form .input-ct input.error,
.request-form textarea.error {
  border-color: #e12d2d;
}

.request-form .input-ct.valid-ct label {
  color: #444a53;
  top: -8px;
  z-index: 1;
}

.request-form .input-ct.error-ct label {
  color: #e12d2d;
  z-index: 1;
}

.request-form label.error {
  font-size: 14px;
  font-weight: 400;
  background: url("/assets/icons/icon-error.svg") left center no-repeat;
  padding-left: 20px;
  line-height: 16px;
  color: #e12d2d;
  margin-top: 8px;
  display: block !important;
  text-align: left;
}

.request-form .valid-ct label.error {
  display: none !important;
}

div.error-ct h4 {
  color: #e12d2d;
  margin-bottom: 8px;
}

.request-form textarea {
  border: 1px solid #6d7582;
  border-radius: 4px;
  background-color: #fff;
  font-size: 20px;
  width: 100%;
  height: 136px;
  cursor: auto;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 20px 16px;
  box-sizing: border-box;
  transition: background-color 0.4s;
  font-family: motiva-sans, sans-serif;
}

.error-label-ct {
  margin: 0px 0 16px;
}

.request-form .info-txt {
  margin: 4px 0 0px;
  font-size: 14px;
  color: #62668c;
  line-height: 16px;
}

@media screen and (min-width: 500px) {
  .company-bttn-anim:first-child {
    margin-bottom: 0.75rem;
  }
}
.request-form h4.big {
  font-size: 24px;
  margin-bottom: 0;
}

.request-form h4.title {
  font-size: 12px;
  padding-bottom: 0;
  margin-top: 0;
}

.request-form h4.by-submit {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.request-form h4.by-submit a {
  color: inherit;
  font-weight: inherit;
}

.request-form .hidden-fields {
  display: none;
}

.request-form .hidden-fields .input-ct {
  margin: 20px 0;
}

.request-form .max-char {
  display: block;
  font-size: 14px;
  color: #18216d;
}

.request-form .agent-group h4 {
  padding-bottom: 0;
}

.request-form .clarification-txt {
  display: block;
  font-size: 14px;
  padding-bottom: 15px;
}

.request-form .disclaimer a {
  font-weight: 800;
}

.request-form .disclaimer a:hover {
  text-decoration: underline;
}

.request-form .g-recaptcha {
  margin: 45px 0 0px;
}

.request-form #submit-btn {
  min-width: 165px;
  height: 68px;
  margin-top: 48px;
  line-height: 68px;
  padding: 0;
  pointer-events: none;
  opacity: 0.35;
}

.form-failure .light-blue {
  margin-top: 50px;
}

.form-failure p,
.form-success p {
  font-size: 18px;
  margin: 20px auto 0;
}

.company-bttn-anim {
  border: 0;
}

.hidden {
  display: none;
}

@media screen and (max-width: 767px) {
  .hero {
    min-height: unset;
  }

  .request-form .email-ct {
    margin-right: 0;
  }

  .request-form .phone-ct {
    margin-left: 0;
  }
}
.submit-ct {
  margin: 32px 0 0;
}

@media screen and (min-width: 1200px) {
  .form-ct {
    margin-top: -24px;
  }

  .request-form .container {
    padding: 0;
  }
}
@media screen and (min-width: 991px) {
  .request-form h3.sub-head {
    text-align: center;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="request-form form-ct">
    <form accept-charset="UTF-8" method="post" action="">
      <input type="hidden" name="oid" value="">
      <div class="utm-params-and-cta-id" style="display:none;">
        <input type="hidden" name="utm_term" id="utm_term" value="<? if(isset($_GET['utm_term'])){echo $_GET['utm_term'];} ?>">
        <input type="hidden" name="utm_content" id="utm_content" value="<? if(isset($_GET['utm_content'])){echo $_GET['utm_content'];} ?>">
        <input type="hidden" name="utm_campaign" id="utm_campaign" value="<? if(isset($_GET['utm_campaign'])){echo $_GET['utm_campaign'];} ?>">
        <input type="hidden" name="utm_source" id="utm_source" value="<? if(isset($_GET['utm_source'])){echo $_GET['utm_source'];} ?>">
        <input type="hidden" name="utm_medium" id="utm_medium" value="<? if(isset($_GET['utm_medium'])){echo $_GET['utm_medium'];} ?>">
        <input type="hidden" name="cta_id" id="cta_id" value="No cta_id set">
      </div>
      <div class="fandlname">
        <div class="input-ct first-name-ct">
          <label for="first_name">First name</label>
          <input type="text" autocomplete="given-name" name="first_name" id="first_name" value="" class="text required" size="30" maxlength="32">
        </div>
        <div class="input-ct last-name-ct">
          <label for="last_name">Last name</label>
          <input type="text" autocomplete="family-name" name="last_name" id="last_name" value="" class="text required" size="30" maxlength="32">
        </div>
      </div>
      <div class="input-ct">
        <label for="email">Email address</label>
        <input type="email" autocomplete="email" name="email" id="email" value="" class="text required email" size="30" maxlength="255">
      </div>
      <div class="input-ct">
        <label for="phone">Phone</label>
        <input type="tel" autocomplete="tel" name="phone" id="phone" value="" class="text required" size="30" maxlength="32">
      </div>
      <div class="input-ct">
        <label for="company">Company</label>
        <input type="text" autocomplete="organization" name="company" id="company" value="" class="text required" size="30" maxlength="100">
      </div>
      <div class="input-ct">
        <label for="employees">Number of employees</label>
        <input type="text" name="employees" id="employees" value="" class="text required" size="30" maxlength="8">
      </div>
      <div class="submit-ct">
        <div>
          <input type="submit" accesskey="s" id="jbx-submit" aria-hidden="Submit" value="Get started" class="company-bttn-anim company-btn--blue large light" name="submitBttn">
          <img src="https://companyweb.imgix.net/icons/Arrow-Right-Hover-Animation_white-2021.svg" alt="right arrow icon" class="learn-more-arrow">
        </div>
      </div>
    </form>
  </div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You have to handle this on input change event if the length of the input is greater than 0 apply the valid-ct class otherwise don't

$('input').keyup(function () { 
 if($(this).val().length > 0 ){
 $(this).parent().addClass("valid-ct");
 }else {
  $(this).parent().removeClass("valid-ct");
 }
});

Page link：https//www.codepudding.com/os/196940.html

Prev:Can I click the same gylphicon class and toggle between two functions?
Next:Change different pictures on click
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding