What does this jQuery snippet do?

This snippet checks if the input #demoInput has fewer than 4 characters when the #submitButton is clicked. If so, it shows a warning placeholder, adds a warning style, and prevents submission; otherwise, it clears the warning and allows submission.

Demo

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

<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>

Alternate table row styles Conditional formatting of table rows Copy text to clipboard Disable space input in text fields Multi step form with progress indicator Read more or less Remove the leading and trailing space Short functions Toggle visibility with a slide effect Toggle visibility without pushing content down Validate checkboxes Validate input fields Validate radio buttons Validate TinyMce editor

jQuery

Validate input fields

What does this jQuery snippet do?

About the author