[ad_1]
I'm trying to add a check icon after validating fields, I've done This
and i don't want to use hide/show for adding the check mark - because it's adding them to all the inputs.. that's why I've tried to use append()... but i don't know why it's not working. I've added 2 examples - the first is for you to understand what i wish to achieve - and the second is what i'm trying to do with append.
So this is working partially :
<div class="cont">
<input type="text" class="params_input form-control">
<span class="params_icon"></span>
</div>
<div class="cont">
<input type="text" class="params_input_phone form-control" maxlength="10">
<span class="params_icon"></span>
</div>
</div>
CSS:
.params_icon:before
content: "f00c";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
--adjust as necessary-- color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 4px;
right: 0;
color: #49c8c1;
.params_icon
display: none;
p
color: red;
.cont
display: flex;
position: relative;
.wrapper
display: flex;
JS :
<!-- without append
-->
$(".params_input").keyup(function()
if ($(this).val().length > 3)
$('.params_icon').show();
else
$('.params_icon').hide();
);
$(".params_input_phone").keyup(function()
if ($(this).val().length === 10)
var text = $(this).val();
$(this).val(text.replace(/(d3)(d3)(d4)/, "$1-$2-$3"));
$('.params_icon').show();
);
[ad_2]
لینک منبع
