JavaScript: How to Cancel Form Submit If the Input Value Is Blank

Hello there, let's start. 🙂

We will see examples on how to cancel form submission using:

• HTML5 required attribute.
• Combined with additional JavaScript technique.

There is a demo page here on Monkey Raptor as landing page for the form submission — so that we could validate both techniques.

The page will show us the query string through GET request method.

---

For the Glory of Clarity

The title of the post is rather ambiguous, because “but first, let's honour the holy required tag…” 🤣⁉️🙋‍♂️

💡 This post is more about augmenting default HTML5 behaviour with a bit of JavaScript preventDefault() and manual .submit() after doing checks. ✅

And thus, the vagueness vanishes. Humbly collected the thrown bricks, at your service.

---

HTML5 required attribute

Demonstration

Code

<style> .elements { box-sizing: border-box; padding: 1rem; line-height: 1.5; } </style> <form method="GET" action="/p/query-string-page.html" id="formExampleOne" > <input type="text" placeholder="Cannot be empty..." name="query" class="elements" required="true" > <button type="submit" class="elements">SUBMIT</button> </form>

The form above will not be submitted if the input value is empty.

But sometimes, user can type in all whitespaces or other invalid characters we want to avoid. For that, we need additional JavaScript to check the value.

Additional JavaScript Technique

Demonstration

Code

<style> .elements { box-sizing: border-box; padding: 1rem; line-height: 1.5; } </style> <form method="GET" action="/p/query-string-page.html" id="formExampleTwo" > <input type="text" placeholder="Cannot be empty..." name="query" class="elements" required="true" > <button type="submit" class="elements">SUBMIT</button> </form> <script> function formControl() { // Elements definition. const form = document.getElementById("formExampleTwo") const input = document.getElementById("inputExampleTwo") // Form submission event listener. form.onsubmit = function (event) { // Prevents default submission behaviour of the form. event.preventDefault() // Trims leading and trailing whitespace. const inputValue = input.value.trim() // Stops execution (returns undefined) if inputValue is an empty string. if (inputValue === "") return // Replaces the input value with the one without whitespace. input.value = inputValue // Submits form. form.submit() } } // Runs the function. document.addEventListener("DOMContentLoaded", formControl) </script>

With this, user might enter whitespaces only and the form will do nothing.

We can certainly create more elaborate filter (if condition) to suit our requirement using regular expressions (RegExp).

Examples:

• We want only A-z letters (uppercase and lowercase) and numerals sequence are allowed.
  if (/^[A-Za-z0-9]+$/.test(inputValue || "")) return
• We want the input value must start with the string start and only A-z letters (uppercase and lowercase) + numerals sequence are allowed.
  if (/^start[A-Za-z0-9]+$/.test(inputValue || "")) return
• We want at least the total characters length is 3.
  if (inputValue?.length < 3) return

  ?. is called optional chaining.

• And so on.

---

Nesting and Attributes

The common elements nesting is as above. We can add elements to encapsulate the form or add more elements inside it, depends on the customisation.

The method attribute ➡️ We use GET method to simplify the example above — and use only one query parameter.

For enforced security, we certainly use POST, combined with session token implementation from backend to avoid forgery — which is validated by the backend before it processes the request.

The action attribute ➡️ It is for denoting where the URL the form data will be sent. That URL will then process the request. The URL — without query string and hash fragment — can be a relative (/path/subpath) or an absolute path (https://domain/path/subpath).

The name attribute ➡️ It will be the query name or key. The value of the input element will be the query value or value of that key. If we put name on the submit button, since user cannot modify it, we can use it as a static query parameter — predefined data to accompany the user's input with additional value attribute. As such:

<button type="submit" name="customKey" value="predefinedValue">TEXT</button>

---

Search and Text

In HTML5, there is type="search" ➡️ search value for the attribute type.

<input type="search">

search's main difference compared to text:

• Semantically indicates the input is for search queries.
• May trigger different styling or behaviour in browsers (especially mobile).
  • For example, mobile browsers might show a clear (×) button inside the input.
  • Some screen readers or assistive technology might announce it differently.
• Still behaves like text otherwise — no built-in search logic.

---

A-z in Regular Expressions

I actually never implemented that until I updated this post. I thought, Mm, this should shorten it. Then I put A-z pattern to match A-Z and a-z. Turned out, after I checked it with my gremlinity, it went bonkers. 🤣🤦

This pattern A-z actually matches:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z

There were these gremlins waving:

[ \ ] ^ _ `

(Gremlins) Oi! 👋👋 Nice ride!

Why the gremlins?

💡 [ \ ] ^ _ \` ⬅️ They're all in A to z, because their ASCII values are between Z (90) and a (97). ✅

Therefore, for exactly matching A-Z and a-z ➡️ A-Za-z. Like the examples above.

Using Word Character

The \w ➡️ to match word character — can also be employed.

Though the term is a bit of a misnomer, because it's not really about words in the literary sense — it's about characters allowed in variable name. Shakespeare never did...

Alas, const Prit_e3h = callFunctionToCollapseOnStage(drunknessLevel, object), for thee in what_nots sh4ll be canonised. 🎭

For our information, \w will match these:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 _ Or, [A-Za-z0-9_]

---

Thank you for visiting. I hope this is useful. 🙂