表单输入不起作用的验证
表单输入不起作用的验证
提问于 2018-03-13 05:26:58
我有一个像这样的表格
<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>在单击submit按钮时，如果输入字段为空，则按以下方式突出显示
与此部分相关的代码是
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个输入值，则突出显示的颜色不会消失。我用来创建此功能的代码是
$("#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");
}
});如果用户插入或选择了某个值，请任何人建议如何删除突出显示的颜色。
回答 1
Stack Overflow用户
发布于 2018-03-13 05:47:01
您的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>
希望能帮上忙
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49248868
复制相关文章
相似问题
腾讯云开发者
