我已经创建了四个电子邮件文本框和"更多"链接。
如果我单击更多链接,它会在每个链接上显示一个文本框。
现在,当我输入无效的电子邮件或空白字段时,我正在努力显示错误状态。这是我的代码:
<input onclick="ValidateEmail()" style="float:right;" id="nextbutton" name="" type="submit" value="Next" />
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;
}
我需要显示红色文本框,其中特定文件为空白或无效电子邮件。
我可以知道,我怎样才能实现这个目标?
您可以在inputs
上使用 JQuery 的 keyup()
方法,在每次输入或删除任何字符时验证电子邮件。如果特定电子邮件无效,请将 css 类invalid
添加到其父div
(将每个input
放在单独的div
中(,然后您可以将标记为无效 (.invalid input
( 的div
中的所有子inputs
颜色显示为红色。您还可以在每个输入旁边添加labels
,这些输入仅在其父div
标记为无效时才显示。然后,这些标签包含错误消息。
参见 jsfiddle 示例。
网页代码:
<div id="main"></div>
<input id="nextbutton" name="" type="submit" value="Next" />
.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:
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;
}
}