Question

很棒的Stack Overflow人，

我正在尝试使用Happy.js来验证我的表单，它运行正常。但是，由于我的表单很长并且提交按钮位于表单的最底部，我需要一种方法让用户知道表单上有错误。

我喜欢添加此功能的一些帮助。也许在提交按钮下方取消隐藏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/

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

1 个答案: