0

私は多くの例を見ていましたが、どれも私にとってはまったくうまくいきませんでした。ウィザード内にフォームがあり、サイト全体で 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>

そして私のJ

$('#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') );
       }
      });
4

2 に答える 2

0

1) 要素はタグ内に含まれている必要がありinputます。<form></form>そうしないと、jQuery Validate プラグインは機能しません。

デモ: http://jsfiddle.net/uL2Y8/

2) jQuery および/または jQuery Validate プラグインを含めるのを忘れた可能性があります。「フレームワーク」と「外部リソース」の下の jsFiddle の左側のパネルを見てください。JavaScript エラーが発生していますか?

これらのファイルを配置した場所への正しい URL を含む2 行がこの順序であるsrc必要があります。

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

3) あらゆる種類の小さな間違いがあります。いくつかの無効な HTML (閉じられていないinput要素) と、いくつかのルールを 2 回宣言しています。オプション/ルールrequired内ですでに宣言している場合は、ここでも必要ありません。.validate({})

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

4)highlightプラグインのデフォルトの、success、およびerrorPlacementコールバック関数を オーバーライドする必要はないかもしれません。これらのカスタム コールバック関数を使用すると、エラー メッセージが失われます。

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

于 2013-03-11T16:53:39.670 に答える
-1

以下のようにフォームをラップしてください:
check 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>

于 2013-02-21T02:47:34.330 に答える