0

validatejqueryプラグインによって検証されるフォームがあります。

<form action="" id="contact-form" class="form-horizontal">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="name">Nome:</label>
            <div class="controls">
                <input type="text" class="input-xlarge" name="name" id="name" placeholder="Indique o seu nome" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="email">Email:</label>
            <div class="controls">
                <input type="email" class="input-xlarge" name="email" id="email" placeholder="Indique o seu email" />
            </div>
        </div>
        <!-- ... -->
    </fieldset>
</form>

スクリプトコード：

$('form#contact-form').validate({
    rules: {
        name: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        // ...
    },
    highlight: function(label) {
        $(label).closest('.control-group').addClass('error').removeClass('success');
    },
    success: function(label) {
        label.closest('.control-group').addClass('success');
    },
    submitHandler: function(form) {
        $('form#contact-form').slideUp("slow", function() {
            $(this).before('<div class="alert alert-success"><h4>Informação</h4>Mensagem Enviada com sucesso.</div>');
            setTimeout(function () {
                $('#modal').modal('hide');
            }, 3000);
        });
        return false;
    }
});

私には2つの質問があります：

  1. 彼らが必要としていたのは、エラーが修正されると、.errorクラスが削除され、生成されたラベルが削除されることでした。
  2. 具体的な値を持つ要素、たとえば数値8を配置する必要があるルールは何ですか？

要素にエラーが含まれている場合、コードは次のようになります。

<div class="control-group error">
    <label class="control-label" for="email">Email:</label>
    <div class="controls">
        <input type="email" class="input-xlarge" name="email" id="email" placeholder="Indique o seu email">
        <label for="email" generated="true" class="error" style="">Por favor introduza um endereço de email válido.</label>
    </div>
</div>

エラーが修正されると、コードは次のようになります。

<div class="control-group error success">
    <label class="control-label" for="name">Nome:</label>
    <div class="controls">
        <input type="text" class="input-xlarge" name="name" id="name" placeholder="Indique o seu nome">
        <label for="name" generated="true" class="error" style=""></label>
    </div>
</div>
4

1 に答える 1

1

  1. 成功関数を次のように変更します。

    success: function(label) {
    label.closest('.control-group').removeClass('error').addClass('success');
}

    generated=true パラメータを html タグから削除するのは賢明ではありません。私は過去にそれを行ったことがありますが、検証機能に問題が追加されるだけです。

  2. メソッドを追加できます。

    $.validator.addMethod("equalTo", function(value, element, param) { return (value == param); });

    あなたのルールよりも：

    name: {
    minlength: 2,
    required: true,
    equalTo: "8"
}
于 2012-10-12T12:33:31.923 に答える