isHappy.js allowing ajax call when not valid

I'm throwing this up in hope that someone might spot a mistake because I've gone over this way to many times now. It was working fine for about ten minutes but then just broke.

I have a codeigniter website with a very simple contact form with 3 fields. I'm using isHappy.js to validate the form and then send off to the server. isHappy.js should stop the AJAX function until the form has validated but this parts not happening. If I click the submit button without filling out the form the validation errors flash up but then the ajax call is made and the form is submit.

Heres the Javascript:

 $(function() { 

 $('#contact-form').isHappy({
   fields: {

     '#email': {
       required: true,
       message: 'How can I reach you sans email??'
     },
     '#subject': {
       required: true,
       message: 'Can you give me a clue to what you inquiring about please'
     },
     '#body': {
       required: true,
       message: 'More details please....'
     }
   }
});

 $('#contact-form').bind('submit', function(e) {
                e.preventDefault();
                var query_params = $('#contact-form').serialize();

                $.ajax({
                    type: 'POST',       
                    url: 'http://website.dev:8080/contact/email/ajax',
                    data: query_params,
                    dataType: 'json',

                    success: function(string){
                        $('#contact-form').fadeOut('medium', function() {
                                $('#linkedin').after("<div style=\"clear:both;\" /><div id=\"contact-complete\" stlye=\"width:100%;height:200px;\"><h1>"+string+"</h1></div>").fadeIn('medium');        
                        });                                                             
                    }

                });
    });     
});

And the HTML:

<form action="http://website.dev:8080/contact/email" method="post" accept-charset="utf-8" id="contact-form">        
<div class="contact-input">
    <input type="text" name="email" id="email" placeholder="Your email" value="" />
</div>
<div class="contact-input">
    <input type="text" name="subject" id="subject" placeholder="Subject" value="" />
</div>
<div class="contact-textarea">
    <textarea rows="10" placeholder="How can I help you?" name="body" id="body"></textarea>
</div>
<input type="submit" value="Send" id="contact-click" />

回答1:

According to the happy.js docs, If validation fails two things happen:

The field will get an unhappy class.
The field will get a <span> right before it, in the DOM with a class of unhappyMessage and an id of whatever the field's id is plus _unhappy.

This is purely presentational. You'll have to check that the form does not contain any inputs with unhappy classes before your AJAX call.

var is_unhappy = false;
$('#contact-form div :input').each( function(i) {
    if ( $(this).hasClass('unhappy') ) {
        is_unhappy = true;
        return false;
    }
});
if(!is_unhappy){
    //do ajax.
}

回答2:

Can't tell without the HTML but what type of input are you using? It looks like you are using an input tag of type submit, you could just change it to an input tag of type button and bind to click -- then your problems should go away.