1

これを理解することはできません...

以下のフォームでは、すべての入力が検証に合格するとすぐにすべての入力が消え、送信ボタンだけが表示されます。

たとえば、このフォームで完了前に [送信] をクリックすると、すべての未完了フィールドに「.incomplete」エラー クラスが与えられ、不正確であることが示されます。次に、入力を 1 つずつ調べて完了すると、エラー クラスが消えます。しかし、最後に残った入力が完了し、エラー クラスが削除されるとすぐに、すべての入力が消え、「送信」だけが残ります。

すべてのフィールドが適切に入力されていない状態でユーザーが「送信」をクリックするたびに適用される .incomplete CSS クラスと関係があることがわかります。ただし、この動作の原因はわかりません。どんな助けやアイデアも大歓迎です！彼のコード スニペットが長くなって申し訳ありませんが、この場合、情報が不足するよりは多すぎる方がよいと思います。

検証規則:

$(document).ready(function() {
       $("#form").validate({
            errorLabelContainer: ".textbox",
            keyup: false,
            onfocusout: false,
            onclick: false,
            errorElement: "input",
            errorClass: "incomplete",
            rules: {
                organization: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                firstname: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                lastname: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                email: {
                    defaultInvalid: true,
                    required: true,
                    email: true
                    },
                phone: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 10,
                    },
            },
        });
   });

フォーム HTML:

<div id="form">
    <div id="form_title">REQUEST INFO</div>
    <form id="form" name="form_container" action="#">
        <!-- fields -->
        <input id="organization" class="textbox" type="text" name="organization" minlength="2" value="Organization"/>
        <input id="firstname" class="textbox"  type="text" name="firstname" minlength="2" value="First Name"/>
        <input id="lastname" class="textbox"  type="text"  name="lastname" minlength="2" value="Last Name"/>
        <input id="email" class="textbox"  type="text" name="email" value="Email"/>
        <input id="phone" class="textbox"  type="text" name="phone" value="Phone"/>
        <!-- submit button -->
        <input id="button" name="submit" class="button" type="submit" value="submit"> 
    </form>
</div>

jQuery 検証プラグインのバージョン 1.9 を使用しています。

4

1 に答える 1

1

まず、カスタムメソッドを追加しましたか

jQuery.validator.addMethod("defaultInvalid", function(value, element) 
{
    return !(element.value == element.defaultValue);
});

次に、検証JSを修正します。下部に余分なコンマがあります

(document).ready(function() {
       $("#form").validate({
            errorLabelContainer: ".textbox",
            keyup: false,
            onfocusout: false,
            onclick: false,
            errorElement: "input",
            errorClass: "incomplete",
            rules: {
                organization: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                firstname: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                lastname: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                email: {
                    defaultInvalid: true,
                    required: true,
                    email: true
                    },
                phone: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 10
                }
            }
        });
   });

また、次の方法を試すことをお勧めします。

$('#Form').validate({           
            onchange: false,            
            errorLabelContainer: $('.error-container'),
            wrapper: "p",
                    rules: { ...//specify rules here }
});
于 2012-09-04T18:59:18.157 に答える