Happy.js -在submit按钮下面添加一条消息

Question

令人敬畏的Stack溢流者，

我试图使用Happy.js来验证我的表单，它运行得很好。但是，由于我的表单很长，并且submit按钮位于表单的最底部，所以我需要一种方法让用户知道表单上有错误。

我希望有人能帮我添加这个功能。也许就在submit按钮下面解开一个div之类的东西。

下面是HTML：

<form name="data" action="#" method="POST" id="JumpstartForm">
<label for="f1" class="control-label">First Name<span class='required'>*</span>    </label>

<input title="First Name" type="text" id="f1" name="First_Name" class="input-large" value="" size="25" />        

<div class="centered"><input type="submit" id="submitSignup" value="Submit" class="green-button" /></div>

</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.democracy-nc.org/jumpstart/js/happy.js"></script>
<script src="http://www.democracy-nc.org/jumpstart/js/happy.methods.js"></script>

以下是js的部分：

$(document).ready(function () {
    $('#JumpstartForm').isHappy({
      fields: {
        // reference the field you're talking about, probably by `id`
        // but you could certainly do $('[name=name]') as well.
        '#f1': {
          required: true,
          message: 'Please enter your first name'
        },
      }  
    });
  }); 

我创建了一个JSfiddle：http://jsfiddle.net/gcasalett/E9Lq7/1/

直播页面：http://democracy-nc.org/jumpstart/index.html

第一篇帖子，所以请客气点。谢谢!

Answer 1

您需要的是使用插件提供的回调，称为unHappy，在验证因任何原因而失败时调用它。对于其他选项，您可以检查Happy.js主页http://happyjs.com/。

$(document).ready(function () {
    $('#JumpstartForm').isHappy({
      fields: {
        // reference the field you're talking about, probably by `id`
        // but you could certainly do $('[name=name]') as well.
        '#f1': {
          required: true,
          message: 'Please enter your first name'
        },
      unHappy: function () {
            //here you can show a div, or scroll to the last error.
        },
      }  
    });
  }); 

更新的jsFiddle：http://jsfiddle.net/E9Lq7/4/