0

I am new to jQuery, so I am trying to create my own form validation. AJAX submission was fine, but the validation itself is killing me.

The concept is this:

  1. The user clicks the submit button - 'beautify me'.
  2. If the one (or all) of the three required fields (#name-input, #email-input, #phone-input) are not filled in, than a error class (.validation-error) should be added to the one, which is not filled. And, the whole thing should immediately scroll to #validation-fail-msg which is displayed if error occurred (by default this message is hidden).

I am attaching a codepen with my "creation", so you might help if there is a chance. Thank you in advance guys.

http://codepen.io/anon/pen/oxjZav

<div class="b-form-wrap">
  <p id="validation-fail-msg">Please, fill in the missing fields.</p>
  <form novalidate id="feedback-form">
    <div class="b-form-box">
      <p class="form-box__text form-box__text_no-pad">What's your name?<sup class="form-box__sup">*</sup></p>
      <input type="text" name="name" maxlength="30" required id="name-input" class="form-box__input-field">
      <p class="form-box__text">What's your phone number?<sup class="form-box__sup">*</sup></p>
      <input type="text" name="phone" maxlength="30" required id="phone-input" class="form-box__input-field">
      <p class="form-box__text">What's your email?<sup class="form-box__sup">*</sup></p>
      <input type="text" name="email" maxlength="50" required id="email-input" class="form-box__input-field">
    </div>
    <div class="b-form-box b-form-box_left-mrg">
      <p class="form-box__text form-box__text_no-pad">How can I help you?</p>
      <textarea name="text" class="form-box__input-field form-box__input-field_textarea"></textarea>
    </div>
    <button class="form-box__button">Beautify me</button>
    <p id="validation-success-msg">Thanx, I'll contact you very soon.</p>
  </form>


function feedback_validate() {
  var result = true;
  var f_names = ["#name-input", "#email-input", "#phone-input"];
  var el;

  f_names.forEach(function(item) {
      el = $(item);
      if (el.val() == "") {
        result = false;
        el.addClass("validation-error");
      } else {
        el.removeClass("validation-error");
      }    
  });

  if (result) {
    $("#validation-fail-msg").hide();
  } else {
    $("#validation-fail-msg").show();
  }

  return result;
}
Anthony Forloney
  • 90,123
  • 14
  • 117
  • 115
Sergey Z
  • 55
  • 4
  • Do you have any specific problem? at first glance, you should call the validation function in the submit event of the form (don't forget to preventDefault!). You should also include the [scroll to the msg div](http://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery) – Sebastianb Mar 04 '16 at 15:04
  • Specific problem is that the validation I have created won't work, especially according to the idea I wanted to implement. It is written above. – Sergey Z Mar 04 '16 at 15:12

1 Answers1

0

I built a jsfiddle where I think it complies with the intended funcionality:

$(document).ready(function(){
  $(".form-box__button").click(function(e){
    e.preventDefault();    
    feedback_validate();
  });
});

...

if (result) {
    $("#validation-fail-msg").hide();
  } else {
    $("#validation-fail-msg").show();

    $('html, body').animate({
        scrollTop: $("#validation-fail-msg").offset().top
    }, 1000);

Basically, I added a handler for the button that prevents submitting of the form (you should handle this manually) and calls the validation function, which wasn't being called before. I also added the scroll functionality in the particular case of the fail-msg being showed.

Hope it helps!

Sebastianb
  • 2,020
  • 22
  • 31
  • Sebastian, thanx a lot. – Sergey Z Mar 04 '16 at 15:40
  • But one thing occurred. As I've mentioned, I have done AJAX submission, and it worked fine before, but now, after implementation of your code, it won't work. Sorry for asking, but is there a chance to know what is the reason? I am attaching a part of the JS code with the AJAX submission. http://codepen.io/anon/pen/MyamqN – Sergey Z Mar 04 '16 at 15:42
  • Sure! in this case, the click handler for the button is preventing its default functionality, which is submitting the form. That's why the event handler for the 'submit' event of the form isn't triggered. You should simply move the code for the click handler into the submit handler, or make the ajax request in the click handler, after the validation (and if the validation passed). – Sebastianb Mar 04 '16 at 15:49
  • Sebastian, I am seriously doing smth wrong, cause now I've got everything done at the same moment. I mean the successful validation and failed one. First I tried to put prevent default into the ajax and than vice versa. But still, I get some kind of confusion. Should I delete the rest of document.ready code which is left after I cut the prevent.default thing? God. I am confused a bit. http://codepen.io/anon/pen/PNPjYd?editors=0110 – Sergey Z Mar 04 '16 at 15:59
  • check out the fiddle in the answer, just updated it. I added the ajax call in the click event handler, after checking if the validation returned true (i.e.: if validation was successful, I make the ajax request). The submit event handler is redundant in this case, so you should be fine removing it (if you do something else in that handler, just move it to the click event handler) – Sebastianb Mar 04 '16 at 16:04
  • Sebastian, I am sorry for being so pesky, but the fiddle in the answer is completely the same it was from the time you've posted it. :))) – Sergey Z Mar 04 '16 at 16:11
  • I forgot to update the actual link, lol! Updated it now, here it is just in case: https://jsfiddle.net/1v5t73nk/2/ – Sebastianb Mar 04 '16 at 16:25
  • Sebastian, thank you very much! Appreciate you help! Have a good day bro! – Sergey Z Mar 04 '16 at 16:30