Question

我正在看很多例子，但他们都没有为我工作。我在向导中有一个表单，我在整个站点使用Bootstrap，我看到并尝试了几个例子，但我没有运气。我希望有人可以提前帮助找到我做错了什么

所以这是我的HTML：

<div class="input_align">
    <label class="control-label4" for="facility_name">Facility Name</label>

    <input type="text" class="input-largex3" name="facility_name" id="" required >
</div>

<div class="multi_align">
    <div class="input_align input_col1">
        <label class="control-label4" for="facility_npi">Facility NPI</label>
        <input type="text" class="input-mini" id="" name="facility_npi">
    </div>
    <div class="input_align input_col2">
        <label class="control-label2" for="fed_id">Fed ID</label>
        <input type="text" class="input-mini" id="" name="fed_id">
    </div>
    <div class="input_align input_col2">
        <label class="control-label2" for="medicare_id">Med ID</label>
        <input type="text" class="input-mini" id="" name="med_id">
    </div>
</div>

我的Js

$('#new-contract').validate({
        rules: {
          facility_name: {
            required: true,
          },
          facility_npi: {
            required: true,
          },
          fed_id: {
            minlength: 2,
            required: true
          }
        },

        highlight: function(label) {
            $(label).closest('input').removeClass ('success').addClass('error');
        },
        success: function(label) {
            label
                .text('OK!').addClass('valid')
                .closest('input').addClass('success');
        },
        errorPlacement: function(error, element) {
         error.appendTo( element.parents ('input') );
       }
      });

Answer 1

1）您的input元素必须包含在<form></form>标记中。否则jQuery Validate插件将不起作用。

DEMO：http://jsfiddle.net/uL2Y8/

2）也许您忘了包含jQuery和/或jQuery Validate插件。在“框架”和“外部资源”下查看jsFiddle的左侧面板。您是否收到任何JavaScript错误？

您应该按此顺序排列两行，其中src包含指向您放置这些文件的位置的正确网址：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

3）你有各种各样的小错误。一些无效的HTML（未关闭的input元素）并且您已经两次声明了一些规则。如果您已在required选项/规则中声明.validate({})，那么不也需要在此处：

<input type="text" name="facility_name" required>

4）也许您不需要覆盖插件的默认highlight，success和errorPlacement回调函数。使用自定义回调函数时，会丢失错误消息。

http://jsfiddle.net/uL2Y8/1/

Answer 2

请将您的表格包好如下：
检查Jsfiddle check the form

<div id="new-contract">
<div class="input_align">
    <label class="control-label4" for="facility_name">Facility Name</label>
    <input type="text" class="input-largex3" name="facility_name"
    id="" required>
</div>
<div class="multi_align">
    <div class="input_align input_col1">
        <label class="control-label4" for="facility_npi">Facility NPI</label>
        <input type="text" class="input-mini" id="" name="facility_npi">
    </div>
    <div class="input_align input_col2">
        <label class="control-label2" for="fed_id">Fed ID</label>
        <input type="text" class="input-mini" id="" name="fed_id">
    </div>
    <div class="input_align input_col2">
        <label class="control-label2" for="medicare_id">Med ID</label>
        <input type="text" class="input-mini" id="" name="med_id">
    </div>
</div>

在引导向导中进行表单验证

2 个答案: