jQuery.validationEngine v2.6.1 Only Validates Sometimes?

Question

The code appears to be hooked up (like this)

jQuery("#contactForm").validationEngine();

because it will validate and raise an error bubble if:

• you tab out of required field without any input
• you type at least one character into a field that requires more and then click the submit button

But it will not validate and raise an error bubble if you do nothing at all except click the submit button. In that case, it just submits. Once you click in the field or enter anything at all, it seems to work.

What can I be looking for that I've mis-configured?

The HTML:

<form class = "contactform" id = "contactForm">
    <fieldset>
        <div class="contactform-name contactform-field">
            <label class="contactform-label" for="contactform-name">Name:
                <br>
            </label>
            <input class="validate[required,minSize[8]] contactform-input" type="text" id="contactform-name" name="name" />
        </div>

        <div class="contactform-email contactform-field">
            <label class="contactform-label" for="contactform-email">Email Address:<br></label>
            <input value class="validate[required,custom[email]] contactform-input" type="email" id="contactform-email" name="contactform-email" />
        </div>

        <div class="contactform-text contactform-field">
            <label class="contactform-label" for="contactform-text">Message:
                <br>
            </label>
            <textarea class="validate[required,minSize[12]]contactform-input" name="text" id="contactform-text" > </textarea>
        </div>

        <input class="contactform-button" type="submit" name="submit" value="Send" />

    </fieldset>
</form>

The JavaScript (it's running in Meteor):

Template.Contact.rendered = function () {
    jQuery("#contactForm").validationEngine();
}

Vernon

could you post more code (html and javascript) about your contactForm form? – Bibliopole

I've updated the original question with some code snippets. – Vernon

can you create a jsfiddle? seems the submit didn't get bind to validationEngine, but can't tell why from your code. – Bibliopole

@Bibliopole I'll see about the jsfiddle, I haven't tried that before. But I think it does bind because it will validate sometimes, but just not all the time. – Vernon

jsfiddle doesn't seem to help. I'm running my code within Meteor and it behaves differently than "normal" HTML/PHP/JavaScript. It seems as if this is a Meteor specific problem because I can get it to work as expected in a test MAMP stack. I'll try to add a Meteor tag to my initial question. – Vernon

Answer 1

I've never used this engine, but from the docs I found that 'attach' will attach the validator to form.submit. Can it be as simple as that?

https://github.com/posabsolute/jQuery-Validation-Engine#attach

EDIT:

You can also do stuff to the submit-event (if the tip above won't help).

Something like this (not tested, but should put you in the correct path):

Template.templateName.events({
   'submit': function(event) {

      // Prevent the submit with preventDefault()
      event.preventDefault();

      // Do something to check the submit etc.

   }
});

Scever

The docs do say "Without any parameters, the init() and attach() methods are automatically called." But I'll try explicitly calling attach(). It does seem to be attaching, though, because it will validate under some conditions. – Vernon

Edited answer with the submit-event in meteor. – Scever

That's a good thought, but I already had that in there for form handling: Template.ContactForm.events ({ 'submit form': function(event) { event.preventDefault(); To = '[email protected]'; Leader = 'Message from '; From = jQuery(event.target).find('[name=email]').val(); ClientName = jQuery(event.target).find('[name=name]').val(); Message = jQuery(event.target).find('[name=text]').val(); Subject = Leader + ClientName; Meteor.call ('sendEmail', To, From, Subject, Message ); Meteor.Router.to ('ThankYou'); } }) I entered an issue in the plug-in's GitHub page. – Vernon