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!")
$(document).ready(function(){
XT1
});
</script>
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>
$(document).ready(function() {
XT1
});
</script>
