0

I have a form that I am loading via Ajax with jQuery. I am also using jQuery Validation to validate the input. When the user enters valid data into the input field, when the button is clicked, it shows the red error box below the input with no text in it. The input is using bootstrap input group. The form is also using the jQuery validation plugin to submit the form via Ajax. Here is the code I am using to validate:

$(document.body).on('click', '#submit-form-button', function() {
  $("#form1").validate({
    submitHandler: function(form) {
      // Loading State
      var submitButton = $('#submit-form-button');
      submitButton.button("loading");
      // Ajax Submit
      $.ajax({
        type: "POST",
        url: "submit-form.php",
        data: {
          "input1": $("#form1 #input1").val(),
        },
        dataType: "json",
        success: function(data) {
          if (data.response == "success") {
            //SHOW SUCCESS
            // Reset Form
            $("#form1 .form-control")
              .val("")
              .blur()
              .parent()
              .removeClass("has-success")
              .removeClass("has-error")
              .find("label.error")
              .remove();
          } else {
            //SHOW ERROR
          }
        },
        error: function(data) {
          console.log(data);
        },
        complete: function() {
          submitButton.button("reset");
        }
      });
    },
    rules: {
      input1: {
        required: true,
        email: true
      }
    },
    highlight: function(element, errorClass) {
      // Do nothing
    },
    success: function(element) {
      $(element)
        .parent()
        .removeClass("has-error")
        .removeClass("alert")
        .removeClass("alert-danger")
        .addClass("has-success")
        .find("label.error")
        .remove();
    },
    errorPlacement: function(error, element) {
      if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element);
      }
    },
    errorElement: "div",
    errorClass: "alert alert-danger"
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script>
<form id="form1" method="post" action="submit-form.php">
  <div>
    <label class="control-label sr-only" for="input1">Input 1</label>
    <div class="input-group input-group-lg">
      <input type="email" class="form-control" id="input1" name="input1" placeholder="Enter Your Email Address">
      <span class="input-group-btn">
        <button class="btn btn-blue" type="submit" id="submit-form-button" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> SENDING">SEND</button>
                </span>
    </div>
  </div>
</form>
Sparky
  • 98,165
  • 25
  • 199
  • 285
tvirelli
  • 458
  • 7
  • 22
  • Please update the snippet I made for you with any additional libraries such as bootstrap – mplungjan Jan 11 '18 at 10:45
  • Done. I also changed everything to the versions I am using. – tvirelli Jan 11 '18 at 10:53
  • I don't think it is a duplicate. That post talks about after an error, they need to clear it. However, on my form, even if the first data entered is valid, once you click the button, the error container still shows. – tvirelli Jan 11 '18 at 10:58
  • Hence the possible :) – mplungjan Jan 11 '18 at 11:00
  • Your demo code above is working... the text says *"This field is required."* right under the input box as designed. There must be something else wrong that you have not shown us. – Sparky Jan 11 '18 at 16:09
  • You also should not have the `.validate()` method inside of a `click` handler. It's pointless. The `.validate()` method is used for initializing the plugin and only needs to be called once on page load. – Sparky Jan 11 '18 at 16:14
  • Sparky I'm not sure what you mean by not showing you something. If you run the snippet above, you can clearly see the red box show up below the input once you click the button, even with a valid email address entered. There is no extra code in this example and it shows the exact problem. – tvirelli Jan 11 '18 at 16:52
  • I see it now. You really need to use `highlight` and `unhighlight`. – Sparky Jan 11 '18 at 19:01
  • Do you think you could give me an example of `highlight` and `unhighlight` that might fix my problem? – tvirelli Jan 11 '18 at 19:08
  • Not without a lot of work. You'll need to inspect your DOM to see the markup and use `highlight` and `unhighlight` to add/remove classes as appropriate. You could also search any jQuery Validate questions that also contain the Bootstrap tag and just see how those are done. – Sparky Jan 11 '18 at 19:10
  • This whole thing has everything to do with CSS and HTML as structured by Twitter Bootstrap... something very critical, which is totally ignored by your description. – Sparky Jan 11 '18 at 20:19
  • I found the core issue. It's that I am using the class of "alert alert-danger" which has display: block. If change the errorClass to be "text-danger" it isn't seen. The problem is, once the error element is added, it isn't removed. I found a hacky way to fix this by just using jquery to remove the element in the submit handler and on success. This hack only works because i only have element to worry about on this form. But again, the problem is that my error class is display block and on valid input, that error class isn't removed. – tvirelli Jan 11 '18 at 20:58
  • For reference, this: https://stackoverflow.com/questions/48205113/why-is-an-empty-error-box-showing-when-i-submit-my-form-even-when-it-is-validat?noredirect=1#comment83391912_48205113 Does not solve my problems. I tried to implement it and still have the same issue. – tvirelli Jan 11 '18 at 21:01

0 Answers0