Ad

Issues With JQuery Validate Onkeyup And Highlighting

- 1 answer

I am having issues with jQuery Validate. This is the first time I have created a form using Validate and am a little confused on why some of the things are not working. I uploaded it to JsFiddle HERE so that it does not become overwhelming on here, but they require that I add a little code so for the first issue I will include an example of what I tried below.

$('.awesome-form').validate({
                    onkeyup:true,
                    errorElement: 'div',
                    errorClass: 'formError',
  1. I am trying to get it to validate onkeyup. I have tried to add onkeyup like it says in the documentation like above, but this does not do what I want it to do. The name field and the message field will not show an error until I click enter. Every now and then I can get it to appear but it is usually only after multiple clicks and submits.

  2. I am having an issue with the custom highlight. For some reason it works only on the message input. essentially I would like it so that when an error occurs it will immediately turn the border-bottom to red.

Ad

Answer

$(function() {

                  $('.awesome-form .input-group input, textarea').focusout(function() {

                    var text_val = $(this).val();

                    if (text_val === "") {

                      $(this).removeClass('has-value');

                    } else {

                      $(this).addClass('has-value');

                    }

                  });

                });

                $(function() {
                  $.validator.setDefaults({
                    highlight: function(element) {
                      $(element)
                        .closest('.formInput')
                        .addClass('errorHighlight');
                    },
                    unhighlight: function(element) {
                      $(element)
                        .closest('.formInput')
                        .removeClass('errorHighlight');
                    }
                  });
                  $('.awesome-form').validate({
                    errorElement: 'div',
                    errorClass: 'formError',
                    errorContainer: '#errorPanel',
                    errorLabelContainer: '#errorPanel ul',
                    onkeyup:function(element) {
                   
                      $(element).valid();
                    },
                    wrapper: 'li',
                    rules: {
                      name: {
                        required: true
                      },
                      email: {
                        required: true,
                        email: true
                      },
                      message: {
                        required: true
                      }
                    },
                    messages: {
                      name: {
                        required: 'Please include at least a first name'
                      },
                      email: {

                        required: 'Please include your email address',
                        email: 'Invalid email address'
                      },
                      message: {
                        required: 'Please include a short message'
                      }
                    }
                  });
                });
.chosenContact {
  cursor: pointer;
  display: flex;
  box-sizing: border-box;
  width: 100px;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 5px;
}
.chosenContact p {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
label input {
  display: none;
}
label input[type="radio"]:checked + img {
  background: red;
  border: solid 4px red;
}
input,
textarea {
  background: none;
  border: solid 2px #232323;
  color: #232323;
  padding: 15px 40px;
  font-size: 18px;
  display: inline-block;
}
input:focus,
input:active,
textarea:focus,
textarea:active {
  outline: none;
}
input[type="text"],
input[type="email"],
textarea {
  border: none;
  border-bottom: 2px solid #232323;
  min-width: 300px;
}
input[type="text"]..errorHighlight,
input[type="email"].errorHighlight,
textarea.errorHighlight {
  width: 170px;
  background-color: red;
  max-height: 70px;
}
input[type="submit"]:active {
  color: white;
  background: red;
  border: red;
}
.input-group {
  display: inline-block;
  margin: 20px 0 20px 0;
  position: relative;
}
.input-group input,
textarea {
  padding: 15px 0px;
}
textarea {
  width: 100%;
}
.errorHighlight {
  border: none;
  background-color: red;
  border-bottom: 2px solid red;
}
.input-group label {
  position: absolute;
  top: 50%;
  left: 0px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "Georgia", "Cambria", "Times New Roman", "Times", serif;
  font-style: italic;
  font-size: 18px;
  color: #999;
  pointer-events: none;
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
}
.input-group input:focus + label,
.input-group input.has-value + label,
.input-group textarea:focus + label,
.input-group textarea.has-value + label {
  top: -10px;
  font-size: 12px;
  color: #aaa;
}
.input-group-submit {
  display: flex;
  justify-content: space-around;
  align-items: center;
<!DOCTYPE html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
</head>

<body>
  <div class="contactUs">

    <form class="awesome-form" name="contactForm" action="phpScripts/contactForm.php" method="post">

      <div class="contactWho">

        <label class="chosenContact">
          <input type="radio" name="who" value="Boss" checked>
          <img src="http://www.placecage.com/100/100" alt="">
          <p class="contactStaffName">Boss Man</p>

        </label>

        <label class="chosenContact">
          <input type="radio" name="who" value="staff1">
          <img src="http://www.placecage.com/100/100" alt="">
          <p class="contactStaffName">Staff Member 1</p>
        </label>

        <label class="chosenContact">
          <input type="radio" name="who" value="staff2">
          <img src="http://www.placecage.com/100/100" alt="">
          <p class="contactStaffName">Staff Member 2</p>
        </label>

      </div>

      <div class="sayWhat">
        <div class="nameAndEmail">

          <div class="input-group">
            <input class="formInput" type="text" name="name">
            <label class="formLabel">Your Full Name</label>
          </div>

          <div class="input-group">
            <input class="formInput" type="email" name="email">
            <label class="formLabel">Your Email Address</label>
          </div>

        </div>

        <div class="input-group">
          <textarea class="formInput" name="message" rows="10"></textarea>
          <label class="formLabel">How Can I Help You?</label>
        </div>

        <div class="input-group-submit">
          <input type="submit" value="Contact Us">
        </div>
      </div>

    </form>

    <div id="errorPanel">
      <ul>

      </ul>
    </div>
  </div>
</body>

</html>

Ad
source: stackoverflow.com
Ad