我有一个看起来像这样的表格
<form data-toggle="validator" role="form" method="post" >
<input type="text" id="first_name" name="first_name" required >
<input id="rec_skill" name="tags-4" type="text" required>
<select class="profile-select" name="industry" id="industry" required>
<option value="">INDUSTRY </option>
<?php foreach($industry as $indus): ?>
<option value="<?php echo $indus->industry; ?>" >
<?php echo $indus->industry; ?>
</option>
<?php endforeach; ?>
</select>
<input id="skills" name="skills" type="text" value="" class="form-control" required>
<button type="submit" class="btn btn-primary psbtn-bg" id="submit_profile" >SUBMIT</button>
</form>
如果输入字段为空,则单击提交按钮后会突出显示,如此
与此部分相关的代码是
if(rec_skill=="" || rec_skill==null)
{
$(".tagsinput").css("border", " 1px solid #B94A48");
}
else
{
$(".tagsinput").css("border", "1px solid #ccc");
}
if(skills!='')
{
$(".tagsinput").css("border", "1px solid #ccc");
}
else
{
$(".tagsinput").css("border", " 1px solid #B94A48");
}
现在,如果用户填写这些输入字段中的任何值,则会删除突出显示的颜色。它适用于普通输入字段,但不适用于
<input id="rec_skill" name="tags-4" type="text" required>
并且
<input id="skills" name="skills" type="text" value="" class="form-control"
required>
上面提到的2个输入字段是使用此plugin创建的,并在此插件下使用#34;标签输入自动完成功能&#34;正在使用
现在,如果用户填写这两个输入值,则突出显示的颜色不会消失。我用来创建此功能的代码是
$("#rec_skill").change(function()
{
if ($(this).val() == "")
{
$(".tagsinput").css("border", " 1px solid #B94A48");
}
else
{
$(".tagsinput").css("border", "1px solid #ccc");
}
});
$("#skills").change(function()
{
if ($(this).val() == "")
{
$(".tagsinput").css("border", " 1px solid #B94A48");
}
else
{
$(".tagsinput").css("border", "1px solid #ccc");
}
});
任何人都可以建议如果用户插入或选择了值
,如何删除突出显示的颜色答案 0 :(得分:0)
你的jQuery不正确。首先,您的input
有ID rec_skills
和skills
,因此要使用ID调用元素,您应使用$(#idname)
而不是$(.idname)
。其次,代码中没有类名.taginput
的元素。请查看该片段以供参考。
编辑:在这种情况下最好使用focusout
来检查用户是否跳过输入字段而不添加任何值。
$("#rec_skill").focusout(function()
{
if ($(this).val() === "")
{
$(this).css("border", " 1px solid #B94A48");
}
else
{
$(this).css("border", "1px solid #ccc");
}
});
$("#skills").focusout(function()
{
if ($(this).val() === "")
{
$(this).css("border", " 1px solid #B94A48");
}
else
{
$(this).css("border", "1px solid #ccc");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<input id="rec_skill" name="tags-4" type="text" required>
<input id="skills" name="skills" type="text" value="" class="form-control"
required>
希望这个帮助