I'm working on a form and it is necessary that when the user enters the input field Name and exit to appear below the text and border orange color
$(function() {
$('#imeprezime1').on('blur', function(e) {
var provera = /^[A-ZČĆŠĐŽ]{0,1}([a-z] )\s{0,1}[a-z]{4,180}$/.test($(this).val());
if (provera === true) {
$(this).css('outline', '0px solid');
} else {
$(this).css('outline', '4px solid orange');
$(this).after('<span>Test</span>' "<br>");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<form id="form">
<div >
<label>Име и презиме</label>
<input type="text" placeholder="Овде унети име и презиме" name="imeprezime" id="imeprezime1">
<label>Имејл</label>
<input type="text" placeholder="Овде унети имејл" name="mejl" id="imejl1">
<label>Телефон</label>
<input type="text" placeholder="Овде унети телефон" name="telefon" id="telefon1">
<label>Лозинка</label>
<input type="password" placeholder="Овде унети лозинку" name="password1" id="lozinka1">
<label>Поновљена лозинка</label>
<input type="password" placeholder="Овде унети поновљену лозинку" name="password2" id="lozinka2">
</div>
<button type="submit">Региструј се</button>
</form>
</div>
CodePudding user response:
Misliš na ovo? :)
$(function() {
$('#imeprezime1').on('blur', function(e) {
var provera = /^[A-ZČĆŠĐŽ]{0,1}([a-z] )\s{0,1}[a-z]{4,180}$/.test($(this).val());
if (provera === true) {
$(this).css('outline', '0px solid');
} else {
$(this).css('outline', '4px solid orange');
$(this).after(`<span>Test</span><br>`)
}
});
$('#imeprezime1').on('focus', function(e) {
$(this).next("span").remove();
$(this).next("br").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<form id="form">
<div >
<label>Име и презиме</label>
<input type="text" placeholder="Овде унети име и презиме" name="imeprezime" id="imeprezime1">
<label>Имејл</label>
<input type="text" placeholder="Овде унети имејл" name="mejl" id="imejl1">
<label>Телефон</label>
<input type="text" placeholder="Овде унети телефон" name="telefon" id="telefon1">
<label>Лозинка</label>
<input type="password" placeholder="Овде унети лозинку" name="password1" id="lozinka1">
<label>Поновљена лозинка</label>
<input type="password" placeholder="Овде унети поновљену лозинку" name="password2" id="lozinka2">
</div>
<button type="submit">Региструј се</button>
</form>
</div>