[英]Change textfield border colour and also validation @ for the email
Below is my code which is a client side form validation that only display the validation message but i want it to also change the border color to red when displaying the validation message. 下面是我的代码,它是一个客户端表单验证,仅显示验证消息,但我希望它在显示验证消息时也将边框颜色更改为红色。 I did this (input #register-form {border:1px solid #ca4343;}) but did not work.
我这样做了(输入#register-form {border:1px solid#ca4343;}),但是没有用。
Also I what to check for @ in the email required validation 另外我要检查电子邮件中的@是否需要验证
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
// When the browser is ready...
$(function() {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
name: "required",
gender: "required",
address: "required",
email: {
required: true,
email: true
},
username: "required",
password: {
required: true,
minlength: 5
}
},
// Specify the validation error messages
messages: {
name: "<br>Please enter your name",
gender: "<br>Please specify your gender",
address: "<br>Please enter your address",
email: "<br>Please enter a valid email address",
username: "<br>Please enter a valid username",
password: {
required: "<br>Please provide a password",
minlength: "<br>Your password must be at least 5 characters long"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
<form action="./" method="post" id="register-form" novalidate="novalidate">
<div class="label">Name</div><input type="text" id="name" name="name" /><br />
<div class="label">Gender</div><select id="gender" name="gender" />
<option value="">Select One</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
</select><br />
<div class="label">Address</div><input type="text" id="address" name="address" /><br />
<div class="label">Email</div><input type="text" id="email" name="email" /><br />
<div class="label">Username</div><input type="text" id="username" name="username" /><br />
<div class="label">Password</div><input type="password" id="password" name="password" /><br />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
Thats a form, not an input. 多数民众赞成在一种形式,而不是一种输入。 Try this:
尝试这个:
form#register-form {border:1px solid #ca4343;}
Or more preferably, assign invalid forms a class, eg 'invalid'. 或更优选地,分配无效形式一个类,例如“无效”。 Then your CSS could read:
然后,您的CSS可能显示为:
form.invalid {border:1px solid #ca4343;}
To only render invalid forms with this border. 仅渲染带有此边框的无效表单。
<style>
.error,#register-form
{
border: solid 1px #ca4343
}
</style>
validation js add new class 'error' you can apply css on this class to show border 验证js添加新类“错误”,您可以在此类上应用css以显示边框
Create a new class in your css: 在CSS中创建一个新类:
input.error {
border:1px solid #ca4343;
}
.error
is the default error class for the jquery validation plugin .error
是jquery验证插件的默认错误类
OP added requirement to check for @ in email address: OP添加了在电子邮件地址中检查@的要求:
the line email: true
in your validate rules checks to see if the email address is a valid email address, and from the docs this appears to check for an @ 该行
email: true
在您的验证规则中进行检查,以查看该电子邮件地址是否为有效的电子邮件地址,而从文档中看,似乎在检查@
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.