實現 CSS 自定義表單驗證錯誤消息

Question

大家！ 我正在嘗試使用 Materialize CSS 和 jQuery 驗證插件 ( https://jqueryvalidation.org/ ) 創建我的注冊表單。

只是想知道如何將我為插件中的每個驗證規則設置的自定義錯誤消息放入 input 元素的 data-error 屬性中？

根據 Materialize CSS 的文檔 ( http://materializecss.com/forms.html )，我們可以通過向輸入字段標簽添加 data-error 屬性來添加自定義驗證錯誤消息。 但是對於任何被破壞的驗證規則，這只會​​顯示一條消息。

我想為用戶違反的特定驗證規則顯示適當的錯誤消息。

這是我的表格：

<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."
    }
}
});

或者是否有另一種方式將自定義錯誤消息顯示到 Materialize 中輸入元素的驗證消息標簽中？

Answer 1

這里有一個名為自定義錯誤和成功消息的部分 - http://materializecss.com/forms.html

您應該使用的是放置在標簽上的 data-error 屬性。

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

當然，如果你想讓消息動態化，你需要使用更多的邏輯，但消息需要進入 data-error 屬性。

希望這會有所幫助。

Answer 2

只需在輸入中添加 required="" 或 required ，它應該可以正常工作

Answer 3

嘗試將其添加到您的方法中：

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

Answer 4

根據materialize 1.0.0 文檔，您需要在標簽label之后添加帶有data-error和data-success屬性的標簽span 。

<div class="input-field inline">
  <input id="email_inline" type="email" class="validate">
  <label for="email_inline">Email</label>
  <span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>