web-dev-qa-db-ja.com

CSSカスタムフォーム検証エラーメッセージを具体化する

全員！ MaterializeCSSとjQueryValidationプラグイン（ https://jqueryvalidation.org/ ）を使用して登録フォームを作成しようとしています。

プラグインの各検証ルールに設定したカスタムエラーメッセージを入力要素のdata-error属性に配置する方法を知りたいだけですか？

Materialize CSSのドキュメント（ http://materializecss.com/forms.html ）によると、入力フィールドラベルにdata-error属性を追加することで、カスタム検証エラーメッセージを追加できます。ただし、これには、違反した検証ルールに対するメッセージが1つだけ表示されます。

ユーザーが破った特定の検証ルールに適切なエラーメッセージを表示したい。

これが私のフォームです：

<form id="reg-form">
<div class="row">
    <div class="input-field col s6">
        <input id="firstname" name="fname" type="text"/>
        <label for="firstname">First Name</label>
    </div>
    <div class="input-field col s6">
        <input id="lastname" name="lname" type="text">
        <label for="lastname">Last Name</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="email" name="email" type="email" required/>
        <label for="email">Email</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="password" name="pass" type="password" required/>
        <label for="password">Password</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="confirm-password" name="confirm_pass" type="password" required/>
        <label for="confirm-password">Confirm Password</label>
    </div>
</div>
<div class="row">
    <div class="col s12 right-align">
        <button class="btn btn-large" type="submit" name="action">
            Submit
        </button>
    </div>
</div>

そして、これが私の検証方法です：

$("#reg-form").validate({
rules: {
    fname: {
        required: true,
        minlength: 2
    },
    lname: {
        required: true,
        minlength: 2
    },
    mobile_num: {
        required: true,
        minlength: 10,
        maxlength: 10
    },
    email: {
        required: true,
        email:true
    },
    pass: {
        required: true,
        minlength: 5
    },
    confirm_pass: {
        required: true,
        minlength: 5,
        equalTo: "#pass"
    }
},
//For custom messages
messages: {
    fname: {
        required: "Please enter your first name.",
        minlength: "You sure you're named with one letter?"
    },
    lname: {
        required: "Please enter your last name.",
        minlength: "You sure you're named with one letter?"
    },
    email: {
        required: "Please enter your email address.",
        email: "Please enter a valid email address."
    },
    pass: {
        required: "Please enter a password.",
        minlength: "Password must be atleast 5 characters."
    },
    confirm_pass: {
        required: "Please confirm your password.",
        minlength: "Password must be atleast 5 characters.",
        equalTo: "Password does not match."
    }
}
});

または、マテリアライズの入力要素の検証メッセージラベルにカスタムエラーメッセージを表示する別の方法はありますか？

jqueryhtmlvalidationmaterialize
5
Ronneil Petterson

ここにカスタムエラーおよび成功メッセージと呼ばれるセクションがあります- http://materializecss.com/forms.html

使用する必要があるのは、ラベルに配置されたdata-error属性です。

<label for="firstname" data-error="Please enter your first name.">First Name</label>

もちろん、メッセージを動的にしたい場合は、さらにロジックを使用する必要がありますが、メッセージはdata-error属性に入れる必要があります。

お役に立てれば。

2
Marko Francekovic

これをメソッドに追加してみてください：

    errorElement: 'div',
errorPlacement: function (error, element) {
    var placement = $(element).data('error');
    if (placement) {
        $(placement).append(error)
    } else {
        error.insertAfter(element);
    }
}
0
Louis Philippe

required = ""またはrequiredを入力に追加するだけで、問題なく動作するはずです。

0
Tyus Durant