Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Executing a Function on Form Submit Event in jQuery</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style> .error{ color: red; } </style> <script> $(document).ready(function(){ $("form").submit(function(event){ var regex = /^[a-zA-Z]+$/; var currentValue = $("#firstName").val(); if(regex.test(currentValue) == false){ $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000); // Preventing form submission event.preventDefault(); } }); }); </script> </head> <body> <p><strong>Note:</strong> If try to submit any invalid value. It will produce an error.</p> <form action="/examples/html/action.php" method="post" id="users"> <label for="firstName">First Name:</label> <input type="text" name="first-name" id="firstName"> <input type="submit" value="Submit"> <div id="result"></div> </form> </body> </html>
