Form Fires on Error

[sunnyrjuneja]

Hey Rick,

Great library and precisely what I was looking for. I'm having an issue where the form is being submitted even though there is an error firing. Essentially, I leave the form blank, I click submit, validation occurs and adds an error message but it continues to post anyways. Any idea what I'm doing wrong?

<form action="http://ipaddress/url/addIssue" name="issue-form">
  // Form Logic
  <button class="btn btn-large btn-block btn-success">Add Issue</button>
</form>
<script type="text/javascript" src="assets/js/validate-rules.js"></script>
</body>

validate-rules.js

var validator = new FormValidator('issue-form', [{
  name: 'title',
  rules: 'required'
}], function(errors, event) {
  if(errors.length > 0) {
    var selector_errors = $('.error-box');
    if (errors.length > 0) {
      selector_errors.empty();
    for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
      selector_errors.append(errors[i].message + '<br />');
    }
      selector_errors.fadeIn(200);
    }
    if(evt && evt.preventDefault) {
      evt.preventDefault();
    } else if (event) {
      event.returnValue = false;
    } 
  } else {
    copy_values();
  }
});

Any idea what I'm doing wrong?

[rickharrison]

It looks like you have a syntax error in your callback function

if(evt && evt.preventDefault) {
  evt.preventDefault();
}

I don't think evt is defined. It should be event. You should open your browsers debugging window to see if any errors are being printed out.

[sunnyrjuneja]

Hi Rick,

I actually thought that was suspect myself but I copied and pasted this off your documentation. On http://rickharrison.github.io/validate.js/, you have the following code:

<script type="text/javascript">

new FormValidator('example_form', [{
    name: 'req',
    display: 'required',    
    rules: 'required'
}, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
}, {
    name: 'password',
    rules: 'required'
}, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
}, {
    name: 'email',
    rules: 'valid_email'
}, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
}, {
    name: 'tos_checkbox',
    display: 'terms of service',
    rules: 'required'
}], function(errors, evt) {
    var SELECTOR_ERRORS = $('.error_box'),
        SELECTOR_SUCCESS = $('.success_box');

    if (errors.length > 0) {
        SELECTOR_ERRORS.empty();

        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            SELECTOR_ERRORS.append(errors[i].message + '<br />');
        }

        SELECTOR_SUCCESS.css({ display: 'none' });
        SELECTOR_ERRORS.fadeIn(200);
    } else {
        SELECTOR_ERRORS.css({ display: 'none' });
        SELECTOR_SUCCESS.fadeIn(200);
    }

    if (evt && evt.preventDefault) {
        evt.preventDefault();
    } else if (event) {
        event.returnValue = false;
    }
});

I changed mine to follow your example above and now it works. Should event read evt?

[rickharrison]

That should work. Have you tried it? Also, where did you copy and paste it from. Did you view the source to copy/paste it?

[sunnyrjuneja]

I tried it, it worked and I copied and pasted it from the source of http://rickharrison.github.io/validate.js/. I'm just not sure if you're using event for browser compatibility or if its a typo.

[rickharrison]

So the second if block still uses event, because that is a global keyword in internet explorer browsers. IE uses event.returnValue to prevent submission of the form.

[sunnyrjuneja]

Thanks, that clarifies everything for me. I'll close this issue.