Logo Luan Morina
Validate form input fields

HTML

<div class="demo-container-main">
<form action="" method="POST" id="demoForm">
<div class="col-12 demo-container-input">
<div class="input-group">
<input type="text" name="demoInput" class="form-control" id="demoInput" placeholder="This is a test form">
<div class="input-group-text"><i class="fa-solid fa-circle-question"></i></div>
</div>
<div class="demo-container-message"></div>
</div>
<div class="col-12 demo-container-submit">
<input name="submit" id="submitButton" type="submit" value="Submit" class="btn btn-primary float-end">
</div>
</form>
</div>

CSS

.demo-container-main {
margin: 0 auto;
max-width: 600px;
border: 1px solid rgba(255, 255, 255, 0.45);
background: linear-gradient(to top, #ffffff 0%, #dfe9f3 100%);
border-radius: 6px; 
padding: 2rem;
}

.demo-container-input {
margin-bottom: 1em;
}

.demo-container-submit {
padding-bottom: 1em;
}

.demo-container-message {
height: 40px;
padding-bottom: 1em;
}

.demo-message {
background: rgba(255, 0, 0, 0.10);
color: rgba(255, 0, 0, 0.90);
letter-spacing: 1px;
padding: 4px 10px;
display: inline-block;
border-radius: 4px;
margin-top: 10px;
}

.demo-input-warning {
background-color: rgba(255 ,0, 0, 0.1);
}

JS

<script>
$(function() {
$('#submitButton').click(function() {
if ($('#demoInput').val().length < 4) {
$('input#demoInput').attr("placeholder", "Please enter at least four characters ⚠ ");
$("#demoInput").addClass("demo-input-warning");
return false;
} else {
$('input#demoInput').attr("placeholder", "");
$("#demoInput").removeClass("demo-input-warning");
return true;
}
});
});
</script>
   Validate input fields with jQuery