[英]How to show particular textbox border red color if i enter invalid email or blank in javascript?
I have been created four email textboxes and also "more" link. 我已经创建了四个电子邮件文本框以及“更多”链接。
If i click more link, it shows one more textbox at each link. 如果我单击更多链接,则在每个链接处还会显示一个文本框。
Now i am struggling with show error status when i enter invalid email or blank field. 现在,当我输入无效的电子邮件或空白字段时,我正在努力显示错误状态。 Here is my code: 这是我的代码:
<input onclick="ValidateEmail()" style="float:right;" id="nextbutton" name="" type="submit" value="Next" />
Javascript: Javascript:
var container = $(document.createElement('div')).css({
padding: '5px', margin: '0'});
$(container).append('<input type=text class="input" id="tb1" placeholder="Email" />');
$(container).append('<input type=text class="input" id="tb2" placeholder="Email" />');
$(container).append('<input type=text class="input" id="tb3" placeholder="Email" />');
$(container).append('<input type=text class="input" id="tb4" placeholder="Email" />');
$('#main').before(container); // ADD THE DIV ELEMENTS TO THE "main" CONTAINER.
var iCnt = 4;
function IsValidEmail(email) {
var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return expr.test(email);
};
function ValidateEmail() {
var email = document.getElementById("tb1").value;
if (!IsValidEmail(email)) {
document.getElementById('tb1').style.border = "solid 1px red";
return false;
}
I need to show red color textbox, in which particular filed is blank or invalid email. 我需要显示红色文本框,其中特定字段为空白或无效的电子邮件。
May i know, how can i achieve this one? 我可以知道,我该如何做到这一点?
You can use JQuery's keyup()
method on the inputs
to validate the emails every time any char is entered or removed. 您可以在inputs
使用JQuery的keyup()
方法来在每次输入或删除任何字符时验证电子邮件。 If a specific email is invalid, add a css class invalid
to its parent div
(put every input
in a separate div
) and then you can color all inputs
red that are children from a div
marked as invalid ( .invalid input
). 如果特定电子邮件无效,则将css类invalid
添加到其父div
(将每个input
放在单独的div
),然后可以将所有来自div
子级的所有inputs
.invalid input
成红色( .invalid input
)。 You may also add labels
next to each input that are displayed only when their parent div
is marked as invalid. 您还可以在每个输入旁边添加labels
,这些labels
仅在其父div
标记为无效时才显示。 These labels then contain an error message. 然后,这些标签包含错误消息。
See jsfiddle example. 请参阅jsfiddle示例。
HTML-Code: HTML代码:
<div id="main"></div>
<input id="nextbutton" name="" type="submit" value="Next" />
CSS: CSS:
.invalid input {
background-color:#fee;
border:1px solid red;
}
.invalid label {
display:inline-block;
}
input {
margin:5px;
padding:2px;
border:1px solid green;
}
label {
display:none;
}
JavaScript: JavaScript:
var container = $(document.createElement('div')).css({
padding: '5px', margin: '0'});
// add several <div><input ...><label>...</label></div>
for (i = 0; i < 5; i++) {
$(container)
.append('<div><input type="text" class="input" id="tb'+i+'" placeholder="Email" /> <label>This email is invalid</label></div>');
}
$('#main').before(container); // ADD THE DIV ELEMENTS TO THE "main" CONTAINER.
// Validate input on every keyup()-event
$("input", container).keyup(function() {
validateEmail($(this));
});
var iCnt = 4;
function isValidEmail(email) {
var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return expr.test(email);
}
function validateEmail(el) {
if (!isValidEmail($(el).val())) {
$(el).parent().addClass('invalid');
return false;
} else {
$(el).parent().removeClass('invalid');
return true;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.