8

私はフォームを検証するために人気のあるBassistancejqueryvalidateプラグインを利用しています。同じフォームで、xoxcoのjQueryタグ入力プラグインを使用しています。

「タグ入力」プラグインで使用されているものを除いて、フォームのすべてのフォームフィールドを検証できます。

その理由は、元の入力が非表示になっていて、新しい入力がプラグインによって描画されているためです。

jsFiddleの例

私の検証スタイルをタグ入力に適用するための助けをいただければ幸いです、Thanx

4

4 に答える 4

9

2つの問題：

  1. すべてのフィールドに。が必要nameです。属性が存在しない場合、検証は正しく動作しません。
  2. ケースの非表示フィールドを検証する必要があります。あなたがしたいことはignore: []、隠しフィールドの検証を含めるために使用することです。

全体として、コードは次のようになります。

HTML：

<form id="someForm" name="someForm" method="post">
    <input type="text" name="required-field" class="required"/>
    <input id="tagsx" type="text" name="tags" class="required" />
    <input type="submit" value="submit"/>
</form>

JavaScript：

$(document).ready(function () {
    $("#someForm").validate({
        ignore: []
    });
    $('#tagsx').tagsInput({
        width: 'auto',
        autocomplete_url: 'http://xoxco.com/projects/code/tagsinput/test/fake_json_endpoint.html'
    });
});

例： http： //jsfiddle.net/5eC5B/

errorPlacementエラーメッセージを正しく表示するには、または同様のものを使用する必要があることに注意してください。

于 2012-07-02T18:41:15.713 に答える
8

タグフィールドを検証するカスタムメソッドを使用してダミーテキストフィールドを検証することで、トリックを実行できます。

HTML：

<form id="someForm" name="someForm" method="post">
    <input type="text" id="txt1" name="txt1"/>
    <input id="tagsx" name="tagsx" type="text" />
    <input id="dummy" name="dummy" type="text" /><!-- dummy text field -->
    <input type="submit" value="submit"/>
</form>

CSS：

/*To hide dummy text field*/
#dummy{
    visibility: hidden!Important;
    height:1px;
    width:1px;
}

JavaScript：

$(document).ready(function () {

    $.validator.addMethod("checkTags", function(value) { //add custom method
        //Tags input plugin converts input into div having id #YOURINPUTID_tagsinput
        //now you can count no of tags
        return ($("#tagsx_tagsinput").find(".tag").length > 0);
    });

    $("#someForm").validate( {
        rules: {
            txt1:"required",
            dummy:"checkTags"
        },
        messages: {
            txt1: "Required",
            dummy: "Required"
        }
    });

    $('#tagsx').tagsInput({
        width: 'auto',
        autocomplete_url: 'http://xoxco.com/projects/code/tagsinput/test/fake_json_endpoint.html' 
    });
});
于 2012-07-08T20:20:45.063 に答える
5

validate-Pluginのデフォルト設定は、ignore-optionからすべてを除外するためignore: ":hidden"に使用します。jQuery.not()

非表示フィールドを含める場合は、次を使用できます。

$("#myform").validate({
   ignore: ""
});

あなたの場合、このJavascriptコードを使用してください：

$(document).ready(function () {
    $("#someForm").validate({
       ignore: ""
    });
    $('#tagsx').tagsInput({
        width: 'auto',
        autocomplete_url: 'http://xoxco.com/projects/code/tagsinput/test/fake_json_endpoint.html'
    });
});

更新：検証コードで見たようにname、プラグインはすべてを。で保存するため、-Attributeが強く必要ですname。コードに追加するだけでも、同じもので保存され、名前が。ignore: ""であるため、検証エラーが1つ発生します。namenull

動作するJSFiddleは次のとおりです。

JSFiddle

于 2012-07-04T11:14:35.773 に答える
1

jQuery validateはデフォルトで、表示されていないフィールドを無視します。この動作をオーバーライドするには、$("#someForm").validate({ignore:""});

于 2012-07-02T16:53:36.360 に答える