Trigger happy.js validation with JavaScript?

Question

jQuery validation is kind of bloated for my purpose, so I found Happy.js. Unfortunately, the validation is only triggered when using a Submit-button, which I don't have. jQuery-validation offered a function "form()" to trigger the validation programmatically, so I tried to implement the function into Happy.js – without any success. I found a happy-callback implementation (commit), but this doesn't work either.

Some code (updated):

$('#someFormSubmit').click(function() {
  $('#someForm').submit();
});
$('#someForm').submit(function(event) {
  event.preventDefault();
  var jqxhr = $.post('/some', $('#someForm').serialize())
    .success(function(response) {});
});
$("#someForm").isHappy({
  fields: {
    '#name': {
      required: true,
      message: "Hello"
    },
  },
  testMode: true,
  unHappy: function () { alert("hello"); },
});

There's no alert from the callbacks and 'happy' is always true, when it should be false.

The form is in a twitter-bootstrap modal box. Due to the separation of modal-body and modal-footer there's only a link .btn to submit, but not a proper input type=submit.

Any solutions?

isHappy sets up the validation, not runs it. It should be ran when the page is loaded, not on the click event. — Rocket Hazmat
Right. That worked for jquery-validation. Changed it, but still no success. :( — Patrick
Try to put $("#someForm").isHappy({ before $('#someForm').submit(function(event) {. — Rocket Hazmat
Yes, it's finally working. I'll update the question with the code ... — Patrick
Make sure to keep the original code in the question, so it still makes sense. Better yet, select the answer that helped, or answer your own question. The solutions should really stay out of the questions, that's what answers are for. — Rocket Hazmat

benekastah benekastah · Accepted Answer · 2012-02-15T16:42:21

Try something like this:

// Remember to do all your happy validation stuff first, to ensure that jQuery
// fires off the events in the correct order.
$("#yourForm").isHappy({
  // your validation config
});

$("#yourForm").submit(function (event) {
  // This line prevents the form from actually being submitted
  event.preventDefault();

  // You can then define your actions however you like
  $.post({
    // your config here
  });
});

// When it's time to "submit" the form, it's easy
$("#yourForm").submit();

I haven't tested this with happy.js, but it should trigger validation as well.

Update: Here is my jsfiddle for this. It demonstrates that it is working (although if you check the fiddle, you will see a few modifications to this code). I don't know why the fields aren't validating on blur, though. That's supposed to work out of the box with happy.js, so you might want to post an issue to the author if you are having that problem.

Trigger happy.js validation with JavaScript?

5 Answers