jquery - Trigger happy.js validation with JavaScript? - Stack Overflow

admin管理员组

文章数量:1332725

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 (mit), 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?

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 (mit), 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?

• javascript
• jquery
• validation
• callback

Share Improve this question Follow edited Jan 6, 2018 at 16:18 Sparky 98.8k2626 gold badges202202 silver badges290290 bronze badges asked Feb 15, 2012 at 16:18 PatrickPatrick 8,0831212 gold badges5555 silver badges9191 bronze badges 6

• isHappy sets up the validation, not runs it. It should be ran when the page is loaded, not on the click event. – gen_Eric Commented Feb 15, 2012 at 16:45
• Right. That worked for jquery-validation. Changed it, but still no success. :( – Patrick Commented Feb 15, 2012 at 16:55
• Try to put $("#someForm").isHappy({ before $('#someForm').submit(function(event) {. – gen_Eric Commented Feb 15, 2012 at 17:15
• 1 Yes, it's finally working. I'll update the question with the code ... – Patrick Commented Feb 15, 2012 at 17:19
• 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. – gen_Eric Commented Feb 15, 2012 at 17:23

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 6

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.

Have you tried using the submitButton option?

From the official documentation at http://happyjs./:

submitButton (string): If you pass jQuery selector to this the form will be validated when that item is clicked instead of on submit.

From HappyJS

Happy.js will now validate individual fields on blur events and all fields on submit.

The validation on blur events isn't enough?

Try to write your HTML code and what you're doing with JS into a jsfiddle, will be easier to get help with it.

But, if you just want to activate the validation when some button/element is clicked, just set the jQuery selector to the variable submitButton in the parameters from happy function

Happy.js registers a submit handler, so if you need to trigger it programmatically you should be able to just trigger submit with jQuery, no?

$(form).submit()

$('#my_form').isHappy({
    when: "blur keyup"
});

This syntax works for the current version of Happy.js.

本文标签： jqueryTrigger happyjs validation with JavaScriptStack Overflow