我想在每个必填字段的框后面创建一个带星号的输入表单。如果用户输入字符串,则星号应更改为感叹号。现在,每次用户输入一个字母时,javascript代码都会添加一个感叹号。
HTML:
<form name="form1">
<ul>
<li><input type='text' name ='text1' required placeholder="required"/></li>
<li><input type='text' name ='text1' required placeholder="required"/></li>
<li><input type='text' name ='text1' placeholder="not required"/></li>
</ul>
</form>
JAVA / JQUERY:
$(function() {
$('input:required').after( "<span>*</span>" );
});
$('input:required').keyup(function(){
var dInput = this.value;
if(dInput.length > 0)
//if($('input:required').is(':valid'))
{
$(this).after("<span>!</span>")
}
});
谢谢你的帮助!
答案 0 :(得分:1)
您的主要问题是 .after
每次调用时都会添加span
元素,您可以使用{{1}取回预先创建的span元素然后更改其内容:
.parent().children("span")
而不是:
$(this).parent().children("span").text("!")
这是纠正代码的最简单方法,但可能不是做你想做的最好的方法。
$(this).after("<span>!</span>")
是完全控制实时验证的好方法,但您也可以查看validation
plugin of jQuery。
修改
使用$('input').keyup()
id而不是浏览DOM树的示例,这样您就可以在不破坏JavaScript代码的情况下将span
标记移动到HTML树中的任何位置:
span
请注意,要使其正常工作,您的输入应在表单中包含唯一的名称。
另请注意,$(function() {
$('input:required').each(function(index) {
var id = this.form.name+this.name+"mark";
$(this).after( "<span id='"+id+"'>*</span>" );
});
});
$('input:required').keyup(function(){
if(this.value.length > 0) {
var id = this.form.name+this.name+"mark";
$("#"+id).text("!");
}
});
标记及其对应的span
可以静态写入HTML或由服务器生成,而不是由客户端在JavaScript中生成。
答案 1 :(得分:0)
您应该使用.foucsout()。一旦从文本字段中丢失焦点,例如,按Tab键跳转到下一个字段或按钮。在.focusout()
回调测试长度并附加'!'
另外,请参阅@zakinster解决方案。他的解决方案将帮助您将'*'替换为'!'。至于我理解这一点,我建议使用.focusout(),这样当用户完成输入输入后,它就会将星号替换为感叹号,然后可以判断他的输入。