Sunday, April 3, 2016

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

Hello there, let's start.

You'll see two methods to do this:

  1. Separated JavaScript function.
  2. Inline JavaScript on the form element.

There's a demo page here on Monkey Raptor as the result of the form submission, so that you know the method is valid.

The page will only show you the query from the GET submit method from the form here.

The HTML form Stacking

The basic structure of form looks like this:

That is the elementary structure. You can add more elements to wrap each element inside the form element to style it even further.

We'll use only GET method here, because this is a basic example, it's just one query and we don't need to put the form data into the HTTP request. The query (the text from the input) in this demo will be visible on the URL bar.
For secure request (not https, but more like sensitive data like email, address, password, etc), the POST method is recommended and a must.

The action attribute is the URL where the form data is sent. That URL will then process the request.

The name for the form and the input elements are important here. That attribute will help us to identify the form parent element and check the value of the input.

In HTML5, there's input with search type. As in <input type="search">, we won't use it, because using type="text" is fine already.

The button doesn't need to have name (for this particular demo), because the thing we wanna capture and filter is the input element text value. Is it blank or not? If it's blank, cancel the submission.

The class attribute on each element above is intended for CSS styling, and the id will be for scripting. But we won't use the id to get the element, instead, we'll use name attribute.

1. The Example -- Separated JavaScript

This is a real example of search form we find everywhere on the internet. But this form will not yield search result, we're just gonna see the form data output on the action URL.


As you can see, there's a div element that wraps the form element, so that the form is wrapped. Hm.

The URL on the action attribute is a relative URL -- without the base domain and protocol. The absolute URL would be: We can use the relative URL only. It's totally OK.

Now, let's create CSS.
The CSS must be wrapped with style tag, and placed above the element we wanna style. Or, to be more efficient, put all CSS in the head section of the HTML.


And then, the JavaScript controller.

JavaScript should be placed at the bottom of the body section of HTML, especially on-page script like this one. For external script, with asynchronous get method and some queue, also better on the bottom of the page. But of course, it mainly depends on the structure of the application.

I'll shut up now.


So, to access an element by its name, which is defined on form element, we just use document.[the_element_name].

And, to access an element inside it (child) which also has a name, use document.[the_element_name].[the_child_element_name].

This method is valid for form element and such.
For general JavaScript-ing (and CSS) purpose, use id (and class).
The class attribute is good for manipulating/processing/styling multiple elements.
And the id attribute is the identifier of one unique element.


This demo form will self-cancel itself (no action) if there's no input.

2. The Example -- Inline JavaScript

Let's use that HTML but modify the name, so that the script from above example won't also control this form or produce error on console.


It's using the same CSS but the onsubmit listener now is attached inline in the form element.

The inline JavaScript is at the form element. This part:

It's actually a shorthand. Translated, if document.fs.qs (the input named qs) element inside the form (named fs) has blank value (''), then don't do anything (return false). If there is string, then do the default method (return true).
The false or true value part is taken from the comparison of the element's value with blank string ('').

If expanded, it'd look like this:


This 2nd demo form will also cancel the default method if there's no input.

Alrighty, that's about that. Happy tinkering.

No comments:

Post a Comment

Tell me what you think...