使用 Jquery 将 Span with Class 添加到输入标记中
Adding Span with Class to a input tag with Jquery
我正在尝试在我的输入后添加一个跨度，它将具有类"错误"和文本"测试"。
我已经尝试了追加和插入方法。我可以让代码在 jsfiddle 上工作，但我无法让代码在我的应用程序上运行。
我把HTML和JS/Jquery放在下面。我的最终结果会在每个带有类型文本的输入旁边都有一个 Span（带有类错误）。然后，我将根据验证循环为此范围设置一个值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zito - Lab 7</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="reservation.js" type="text/javascript"></script>
</head>
<body>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date" autofocus><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights"><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" class="left" checked>Standard
<input type="radio" name="room" id="business" class="left">Business
<input type="radio" name="room" id="suite" class="left last">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" class="left" checked>King
<input type="radio" name="bed" id="double" class="left last">Double Double<br>
<input type="checkbox" name="smoking" id="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email"><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone" placeholder="999-999-9999"><br>
</fieldset>
<input type="submit" id="submit" value="Submit Request"><br>
</form>
</body>
</html>
JS/JQuery
$(document).ready(function() {
var emailPattern = /'b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+'.[A-Za-z]{2,4}'b/;
var phonePattern = /'b('d{3})([-])('d{3})([-])('d{4})'b/;
var datePattern = /'b(0[1-9]|1[012])([/])(0[1-9]|1[0-9]|2[0-9]|3[01])([/])((20)'d'd)'b/;
$(":text").after("<span class='error'>*</span>");
$("#arrival_date").focus();
$("#reservation_form").submit(
function(event) {
var isValid = true;
// validate arrival date
var arrivalDate = $("#arrival_date").val();
if (arrivalDate == "") {
$("#arrival_date").next().text("This field is required");
isValid = false;
} else if (!datePattern.test(arrivalDate)) {
$("#arrival_date").next().text("Must be in the format 12/12/2012");
isValid = false;
} else {
$("#arrival_date").next().text("");
}
// validate nights
var nights = $("#nights").val();
if (nights == "") {
$("#nights").next().text("This field is required");
isValid = false;
} else if ((isNaN(parseInt(nights))) || (parseInt(nights) <=0)) {
$("#nights").next().text("This field must be a number and not zero");
isValid = false;
} else {
$("#nights").next().text("");
}
// validate name
var name = $("#name").val();
if (name == "") {
$("#name").next().text("This field is required");
isValid = false;
} else {
$("#name").next().text("");
}
// validate email
var email = $("#email").val();
if (email == "") {
$("#email").next().text("This field is required");
isValid = false;
} else if (!emailPattern.test(email) ) {
$("#email").next().text("Must be a valid email address.");
isValid = false;
} else {
$("#email").next().text("");
}
// validate phone
var phone = $("#phone").val();
if (phone == "") {
$("#phone").next().text("This field is required");
isValid = false;
} else if (!phonePattern.test(phone) ) {
$("#phone").next().text("Must be in the format 999-999-9999");
isValid = false;
} else {
$("#phone").next().text("");
}
if (isValid == false) {
event.preventDefault();
$("#arrival_date").focus();
}
}
);
}); // end ready
最简单的方法是在表单周围添加一个 Div 容器，然后附加警告。为了有效地追加元素，您需要为其提供一个类或 id。
var email = $("#email"); //using class instead of input:text
var html = "<span class='error'>TEST!</span>"
email.after( html );
但我个人更喜欢这样的东西：
var generateError = function(){
var html = "<div id='error' style='top: 0; left:0; width:100%; height: 50px; background-color: red; text-allign: center; display:none; z-index: 100;'> ERROR!!</div>"
$(body).append( html );
}
var showError = function( text ){
var err = $("#error");
err.html( text );
err.show(500).delay(2000).hide(500);
}
代码是相当不言自明的，但这会产生两个函数：generateError 和 showError。
生成错误 您需要在显示错误之前调用，可能在页面加载时，它会在所有其他元素之上添加一个小标题，并且会显得隐藏。
showError 使用包含要显示的错误的文本参数。然后它会将文本设置为div 并显示两秒钟。
那么这更符合您的需求吗？
$(document).ready(function () {
var input = $("input");
var emailPattern = /'b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+'.[A-Za-z]{2,4}'b/;
input.keypress(function (ele) {
// if regex.test( input ) === false
createErrors(ele.target);
})
});
var createErrors = function (ele) {
$('<span>TEST!</span>').insertAfter(ele);
$("#arrival_date").focus();
};
这适用于按键，这意味着每次按下键时都会检查正则表达式。它还将用户正在键入的元素作为参数传递，这意味着您不会收到所有input：text的错误，而只会收到有错误的错误。
更新的小提琴（仍然不完美，但如果是学校练习，这将帮助您完成它:)
相关文章：
- 为具有相同类的多个输入添加、移除和添加一个类
- 为收音机点击的输入添加值，然后删除
- 单击向输入添加文本值的链接
- 为数字输入添加特殊字符
- 敲除-将用户输入添加到表中的问题
- 只选中一个复选框，然后为选中的输入添加类
- 将 html 输入添加到表中
- 将表单中的输入添加到同一页面中的表中，而无需重新加载
- 将用户输入添加到数组中并在单击时显示
- 显示输入，然后将输入添加到剪贴板ie11
- Javascript:根据用户输入添加到静态URL;添加#xyz
- 通过jquery为mvc项目中动态添加的输入添加验证规则
- 未将标准输入添加到Angularjs Form$Scope中
- jQuery在单击时向输入添加文本
- 当使用AngularJS将新输入添加到另一个输入字段时，如何清除输入字段中的值
- 复选框将输入添加到文本框总选择和总选择成本
- Blueimp为多个输入添加了上传触发器
- 在JavaScript中单击按钮时将用户输入添加到列表
- 表单:如何为新添加的输入添加验证规则
- 通过单击向输入添加值
