Article

Demo

https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js
Copy to clipboard

Form validation helps to ensure that correct data is received by the website.

The following code will showcase the ability of Jquery to check user response across a wide variety of html inputs.

We will check that everything is filled and show a success message after pressing the run code button. https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex9.js?actionable=true

We use $("#field").val() to check if one of the dropdown values has been selected. $(".message") is a selector for a hidden h5 tag which we display when we want to get a message to the user.

Concretely, we use $(".message") like this:$(".message").css("display", "flex").css("color", "red")$(".message").text("Please select an option from the dropdown!")

<script>
$(document).ready(function(){
  XT1
});
</script>
Copy to clipboard
Send to Live Demo

Live demo

<div id="minidivpage" class="example-live"><h4 class="heading-4">Webflow form:</h4><h5 class="message">Message Text</h5><div class="w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" aria-label="Email Form"><label for="name">Name</label><input type="text" class="w-input" maxlength="256" name="name-2" data-name="Name 2" placeholder="" id="name"><label for="email">Email Address</label><input type="email" class="w-input" maxlength="256" name="email-2" data-name="Email 2" placeholder="" id="email" required=""><select id="Field-2" name="Field" data-name="Field" class="w-select"><option value="">Select one...</option><option value="First">First Choice</option><option value="Second">Second Choice</option><option value="Third">Third Choice</option></select><label class="w-checkbox"><input type="checkbox" id="checkbox-2" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input"><span class="w-form-label" for="checkbox-2">Checkbox</span></label></form><div class="w-form-done" tabindex="-1" role="region" aria-label="Email Form success"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail" tabindex="-1" role="region" aria-label="Email Form failure"><div>Oops! Something went wrong while submitting the form.</div></div></div></div>

<script>    
$(document).ready(function() {
  XT1
});
</script>
<script>
  
</script>
Copy to clipboard
Press the Run Demo button to execute the scripts above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Your browser is too small

Resize your browser to be at least 769px wide.