Snippets > jQuery > Validate input fields

Preview

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: 2em auto;
max-width: 600px;
padding: 2em;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
border-radius: 6px;
}

.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;
}

$(function() {
$('#submitButton').click(function() {
if ($('#demoInput').val().length < 4) {
$('input#demoInput').attr("placeholder", "Please enter at least four characters");
$("#demoInput").addClass("btn-warning");
return false;
} else {
$('input#demoInput').attr("placeholder", "");
$("#demoInput").removeClass("btn-warning");
// this demo message ↓
$(".demo-container-message").html('<div class="demo-message">This is a test</div>'); 
return false;
}
});
});