There are a few tiny mistakes. The important ones are:
- Incorrectly retrieving the
<input> value
- Not listening for the
submit event
But using obsolete features like the global event or using onclick attributes will also lead to trouble, eventually.
The <input> value
<input> elements don’t have a val method. Don’t confuse jQuery with the native DOM API. jQuery uses the val method, whereas the native DOM API uses the value property.
Your function will throw Uncaught TypeError: document.querySelector(...).val is not a function on invocation.
The value you want to compare is either one of these:
document.getElementById("username").value // Native DOM; let’s stick with this one
document.querySelector("#username").value // Native DOM
$("#username").val() // jQuery
You can also append a .trim() to any of them if you want to disallow whitespace-only inputs, too.
The comparison
== and != are almost never recommended. They’re not always intuitively transitive since they oftentimes unnecessarily perform type coercion. Use === and !== instead.
The if condition therefore should look like this:
if(document.getElementById("username").value === ""){ /* … */ } // Native DOM
The event object
The way you’ve used event.preventDefault(); uses the obsolete global window.event. It’s not recommended. Use the event argument instead. See What exactly is the parameter e (event) and why pass it to JavaScript functions?.
The proper event type and event target
Clicking the submit button is only one way of submitting a form. You could press Enter as well. Think about it: what is it that you want to prevent? You want to prevent form submission. So listen for the submit event instead. You’d do this on the <form>, not the <button>. Only <form> events dispatch submit events.
Naming conventions
Not crucial, but to avoid confusion in the last step, I’m going to rename id="registerform" to id="registerForm", since JavaScript uses camelCase in several places.
Binding the event and bringing everything together
Inline event handlers like onclick or onsubmit are not recommended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always use addEventListener or jQuery’s .on instead.
This is the event binding, using native DOM APIs. It also uses arrow functions.
document.getElementById("registerForm").addEventListener("submit", (event) => {
if(document.getElementById("username").value === ""){
event.preventDefault();
alert("Please enter a user name.");
}
});
Using jQuery:
$("#registerForm").on("submit", (event) => {
if($("#username").val() === ""){
event.preventDefault();
alert("Please enter a user name.");
}
});
In the HTML, remove onclick completely. You’ve also thrown in a javascript: label for some reason…
Finally, <button>s don’t really use a value attribute. Their tag content is already sort of their value.
<form id="registerForm" class="content formregister" method="POST" action="db/registerinsert.php">
<!-- Omitting stylistic containers -->
<input id="username" name="username" class="input" type="text" required="required">
<button class="button is-link" type="submit">Submit</button>
</form>
Alternative: reportValidity and checkValidity
You’ve included a required attribute. The way to make use of this is to call reportValidity or checkValidity on the form. Note that these methods don’t have full browser support yet, as of 2021.
document.getElementById("registerForm").addEventListener("submit", (event) => {
if(!event.target.reportValidity()){
event.preventDefault();
}
});
Using reportValidity, the browser UI will already display a message like “Please fill out this field” if it’s empty. The similar method checkValidity will also work the same way in the JS, but won’t show the user a message, so your custom alert can be reintroduced.
See the MDN articles on form validation and constraint validation for more, e.g. setting patterns.
Alternative: requestSubmit
There’s a new API, called requestSubmit which simplifies form validation, but isn’t well supported as of 2021. This relies on the required attribute.
document.querySelector("registerForm button[type='submit']")
.addEventListener("click", ({target}) => target.form.requestSubmit(target));
<form id="registerForm" class="content formregister" method="POST" action="db/registerinsert.php">
<!-- Omitting stylistic containers -->
<input id="username" name="username" class="input" type="text" required="required">
<button class="button is-link" type="submit">Submit</button>
</form>
The JS above also uses destructuring assignment and the form property.
