Jquery Validation Engine : Form submitting Without Validation

Question

i am using Jquery Validation Engine (https://github.com/posabsolute/jQuery-Validation-Engine) for one of my forms. The Validation works well but is not able to stop the form from getting submitted even when the field values are not complying with the validation:

I have a Newsletter Sigunp form as follows:

<form id="submit-newsletter" method="POST" action="">
   <input type="text" class="searchform validate[required, custom[email]]" value="Enter Your Email" id="email" name="nw-email" onblur="defaultInput(this);" onfocu    s="clearInput(this);" />
   <input type="hidden" id="newsletter" name="newsletter" value="nl" />
   <input type="submit" class="submit" title="Signup" value="Sign Up" name="newsletter-signup" onclick="newsletterSubscribe(event);" />
</form>

This form is submitted through ajax as follows:

// Newsletter Subscription Without Refresh

function newsletterSubscribe(e) {
  e.preventDefault();
  var dataString = 'nw-email=' + $('input[name=nw-email]').val() + '&newsletter=' + $('input[name=newsletter]').val();
  $.ajax({
    type: "POST",
    url: "/newsletter/",
    data: dataString,
    success: function () {
      $('#newsletter-box').html('<div id="message"></div>');
      $('#message').html('<img width="18px" height="18px" src="/static/img/smtick.png" /><h5>Thank You !</h5>')
      .append('<p>We have recieved your request. Please Check your mail for activation instructions. You will start recieving our newsletter once you have verified t    his email address.</p>')
      .hide()
      .fadeIn(1200);
      }
  });
  return false;
}

The validation Trigger is as follows:

$(document).ready(function() {
  $('#submit-newsletter').validationEngine();
});

Now i can see the validation error message but if i press submit button, form is submitted regardless of the fact that value is not an email address.

Any Ideas ?

Jason Kulatunga · Accepted Answer · 2012-06-01T07:14:33.890

move the code into a click event handler and bind it using jquery. Then test that your form is valid using the validation engine validate method.

$(function(){
    $('#newsletter-signup').click(function(e){
         e.preventDefault();

         //if invalid do nothing
         if(!$("#submit-newsletter").validationEngine('validate')){
         return false;
          }


      var dataString = 'nw-email=' + $('input[name=nw-email]').val() + '&newsletter=' + $('input[name=newsletter]').val();
      $.ajax({
        type: "POST",
        url: "/newsletter/",
        data: dataString,
        success: function () {
          $('#newsletter-box').html('<div id="message"></div>');
          $('#message').html('<img width="18px" height="18px" src="/static/img/smtick.png" /><h5>Thank You !</h5>')
          .append('<p>We have recieved your request. Please Check your mail for activation instructions. You will start recieving our newsletter once you have verified t    his email address.</p>')
          .hide()
          .fadeIn(1200);
          }
      });
      return false;
    })
});

Thanks This works the other way around as it checks if it is valid then it returns false. however i get the idea, i have changed it to check if it is valid then continue to ajax function else return false. Thanks @Jason — Amyth, Jun 01 '12 at 07:18
Indeed this is the trick, to check if the form is valid, but I'd bind this custom AJAX POST on form submit event, not button click as the form might get posted even when the user hits enter on any of the fields ;) ```$("#myForm").on('submit', function(e){e.preventDefault(); ....})``` In this case, if the event trigger will be the form, you can easily build the data object to pass like this: ```data:$(this).serialize()``` and that's it, no need to build dataString anymore ;) — qdev, May 03 '14 at 11:05

score 1 · Answer 2 · answered Jun 01 '12 at 06:47

If you put submit inside the form ,it will try to submit regardless of your validation..It will mostly happen in mozilla..

Try putting the submit outside the form

<form id="submit-newsletter" method="POST" action="">
   <input type="text" class="searchform validate[required, custom[email]]" value="Enter Your Email" id="email" name="nw-email" onblur="defaultInput(this);" onfocu    s="clearInput(this);" />
   <input type="hidden" id="newsletter" name="newsletter" value="nl" />
</form>
   <input type="submit" class="submit" title="Signup" value="Sign Up" name="newsletter-signup" onclick="newsletterSubscribe(event);" />

or even u can make a submit button outside the form..

<button class="submit" title="Signup" value="Sign Up" name="newsletter-signup" onclick="newsletterSubscribe(event);" />

Hope this works :)

you can tie your custom validation code directly to the form like this ```
``` will act the same as if you bind with jQuery on form submit and prevents it from default action by always returning false ;) — qdev, May 03 '14 at 11:14

Jquery Validation Engine : Form submitting Without Validation

2 Answers2