Twitter Bootstrap和jQuery验证插件-位置或错误文本

用户982124

我使用Twitter Bootstrap框架创建了一个表单,并集成了jQuery Validation插件。我有一个带有一系列单选按钮的是/否问题的表格,我通过验证这些单选按钮可以确保每个问题都不为空-效果很好。

如果用户对某个问题的回答为“是”,则其中一种形式具有一些隐藏的表行。我似乎无法控制这些页面上错误文本的位置(“此字段为必填”),并且错误文本未按照我的CSS涂成红色。

这是html:

<form class="form-horizontal" action="#" method="post" id="additional">
  <input type="hidden" name="recid" value="1">

  <table class="table table-condensed table-hover table-bordered">


      <tr>
      <td><strong>Question 1</strong></td>
      <td>please answer yes or no to this question</td>
      <td>
          <div class="controls">
              <label class="radio inline">
      <input type="radio" name="AE_W4" id="AE_W4Yes" value="Yes" required>Yes         </label>
              <label class="radio inline">
      <input type="radio" name="AE_W4" id="AE_W4No" value="No" required>No        </label>
              <label for="AE_W4" class="validateError"></label>
    </div>
      </td>
      </tr>


      <tr id="adverseEventDetails">
      <td></td>
      <td>Please enter the description here</td>
      <td>
          <div class="controls">
      <textarea name="AE_Details_W4" id="AE_Details_W4" rows="3" required></textarea>
      <label for="AE_Details_W4" class="validateError"></label>
    </div>
      </td>
      </tr>

      </table>
   </div>

    <div class="control-group">
        <div class="controls">
          <button type="submit" class="btn btn-primary">Continue</button>
          <button type="reset" class="btn">Reset</button>
        </div>
    </div>

  </form>   

这是脚本:

$().ready(function() {
    // validate the form when it is submitted
    $("#additional").validate();
        errorClass: "validateError";

    if($("#AE_W4Yes:checked").length != 0){
                // yes is checked... show the dependent fields  
                    $("#adverseEventDetails").show(); 
                }else{
                    // hide it and blank the fields, just in case they have something in them
                    $("#adverseEventDetails").hide(); 
                    $("#AE_Details_W4").val("");
                }


    $("#AE_W4Yes").click(function () {
        $("#adverseEventDetails").show();
    });

    $("#AE_W4No").click(function () {
        $("#adverseEventDetails").hide();
        $("#AE_Details_W4").val("");
    });

});

我在这里设置了一个jsFiddle演示这一点。

活泼的

您的代码:

// validate the form when it is submitted
$("#additional").validate();
    errorClass: "validateError";

您的上述代码中存在严重的语法错误。

没什么问题$("#additional").validate();,它只是初始化插件。

但是,errorClass: "validateError";不能像这样那样独自在您的JavaScript中四处游荡。如果要使用该errorClass 选项,则必须根据文档使用它,并将其与任何其他规则和/或选项一起列出 .validate()其中...

// .validate() initializes the plugin
$("#additional").validate({
    // the rules and/or options for Validate() get listed here,
    // and they are separated by commas, not semicolons.
    errorClass: "validateError"
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Facebook和Twitter插件的位置

来自分类Dev

Twitter Bootstrap列位置

来自分类Dev

Twitter Bootstrap Nav下拉位置

来自分类Dev

Twitter Bootstrap和Ruby on Rails的警报/错误

来自分类Dev

Twitter Bootstrap 3 Glyphicons错误

来自分类Dev

Twitter Bootstrap Navbar绘制错误

来自分类Dev

twitter按钮在twitter-bootstrap导航栏中的位置

来自分类Dev

twitter按钮在twitter-bootstrap导航栏中的位置

来自分类Dev

jQuery验证插件和工具提示插件错误

来自分类常见问题

Twitter Bootstrap按钮文本自动换行

来自分类Dev

Twitter Bootstrap中的面板文本对齐

来自分类Dev

Twitter Bootstrap和ZeroClipboard.swf(丢失文件错误)

来自分类Dev

Laravel 4 Twitter Bootstrap 3的分页错误

来自分类Dev

Twitter Bootstrap 3 Navbar崩溃错误

来自分类Dev

Twitter Bootstrap的加载掩码插件

来自分类Dev

如何使用无线电插件为错误消息设置输入样式-Twitter Bootstrap

来自分类Dev

Twitter错误代码215:身份验证数据错误

来自分类Dev

Twitter Bootstrap 3在响应图像上放置文本

来自分类Dev

Linq to Twitter-错误的身份验证数据

来自分类Dev

R中的twitteR身份验证OAuth错误

来自分类Dev

Twitter4j引发401身份验证错误

来自分类Dev

颤抖的Twitter身份验证错误,缺少InitialState

来自分类Dev

Update_with_media函数Twitter中的身份验证错误

来自分类Dev

Requests.get Twitter API错误身份验证

来自分类Dev

使用 fontawesome 在文本前显示 facebook、twitter 和 instagram 图像

来自分类Dev

未使用jQuery设置Twitter数据文本属性

来自分类Dev

文本表单Twitter API?

来自分类Dev

Twitter Bootstrap 3 Jsf 2字体错误

来自分类Dev

减::输入错误/无法识别-Twitter-bootstrap-rails

Related 相关文章

热门标签

归档