[英]Materialize CSS Custom Form Validation Error Message
大家! 我正在尝试使用 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 中输入元素的验证消息标签中?
这里有一个名为自定义错误和成功消息的部分 - http://materializecss.com/forms.html
您应该使用的是放置在标签上的 data-error 属性。
<label for="firstname" data-error="Please enter your first name.">First Name</label>
当然,如果你想让消息动态化,你需要使用更多的逻辑,但消息需要进入 data-error 属性。
希望这会有所帮助。
只需在输入中添加 required="" 或 required ,它应该可以正常工作
尝试将其添加到您的方法中:
errorElement: 'div',
errorPlacement: function (error, element) {
var placement = $(element).data('error');
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
根据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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.