[英]Form validation if @ sign is typed change CSS
At the moment I'm configuring a form with validation. 目前,我正在配置带有验证的表单。 Which all goes fine.
一切都很好。 But I'm trying to get the CSS to change when a user types in the @ sign.
但是,我试图让用户输入@符号时更改CSS。 At this moment the CSS changes when a user types in more that 4 characters, using this code:
现在,当用户使用以下代码输入4个以上的字符时,CSS发生了变化:
$(document).ready(function() {
$('#Emailinput').keyup(function() {
var count = this.value.replace(/ /g, '').length;
var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
$('#Emailinput').text(count);
if (count >= 4) {
$('#Emailinput').css({
'border-color': '#c1c1c1',
'background-image':'url( '+ imageUrl + ' )',
'background-repeat':'no-repeat',
'background-position': '98%'
});
} else {
$('#Emailinput').css({
'border-color': 'red',
'background-image':'url( '+ imageUrlcls + ' )',
'background-repeat':'no-repeat',
'background-position': '98%'
});
}
});
});
Now I would like to change the count
to an event when the @ sign is typed. 现在,我想在键入@符号时将
count
更改为事件。 Everywhere I looked i found this piece of code: 我到处看都发现这段代码:
if ($('#email').val().indexOf('@') > -1) {
So I changed the code to: 所以我将代码更改为:
$(document).ready(function() {
$('#Emailinput').keyup(function() {
var count = this.value.replace(/ /g, '').length;
var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
$('#Emailinput').text(count);
if ($('#Emailinput').val().indexOf('@') > -1) {
$('#Emailinput').css({
'border-color': '#c1c1c1',
'background-image':'url( '+ imageUrl + ' )',
'background-repeat':'no-repeat',
'background-position': '98%'
});
} else {
$('#Emailinput').css({
'border-color': 'red',
'background-image':'url( '+ imageUrlcls + ' )',
'background-repeat':'no-repeat',
'background-position': '98%'
});
}
});
});
Any help, to get the CSS to change when the @
sign is typed? 有什么帮助,以便在键入
@
符号时更改CSS? Did I place the code I found in the correct place? 我是否将找到的代码放在正确的位置? Any help would be appreciated.
任何帮助,将不胜感激。
I think your code is already working, see it here 我认为您的代码已经可以使用了, 请在此处查看
JS JS
$(document).ready(function() {
$('#Emailinput').keyup(function() {
var count = this.value.replace(/ /g, '').length;
var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
$('#Emailinput').text(count);
if ($('#Emailinput').val().indexOf('@') > -1) {
$('#Emailinput').css({
'border-color': 'green',
'border-width': '5px',
'background-image':'url( '+ imageUrl + ' )',
'background-repeat':'no-repeat',
'background-position': '98%'
});
} else {
$('#Emailinput').css({
'border-color': 'red',
'background-image':'url( '+ imageUrlcls + ' )',
'background-repeat':'no-repeat',
'background-position': '98%'
});
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.