MANDATORY activation of CONFIRMATION

Hello everyone, I'm seeking assistance with my code. Below is the form code I need help with:

<form action="input.php" method="POST">
    <input type="text" class="input" name="firstname" placeholder="First Name" required>
    <input type="text" class="input" name="lastname" placeholder="Last Name" required=""><br>
    <input type="text" class="input lower" name="streetnumber" placeholder="Street / Number" required=""><br>
    <input type="text" class="input lower" name="city" placeholder="City" required=""><br>
    <input type="text" class="input lower" name="country" placeholder="Country" required=""><br>
    <button type="submit">Add User</button>
</form>

I am trying to determine if using 'required' in the input fields can trigger validation. The type of validation I am looking for is essentially NOT NULL, and I would like a paragraph above each input field to display text ("This field is required"). If you are unsure about my question, please leave a comment and I will provide more information. I understand that I may need to use some JavaScript code, so any help with that code and guidance on what I need would be greatly appreciated.

Thank you to the community for your assistance.

Answer №1

let userCountry = document.getElementById("country").value;
                let message = document.getElementById("pcountry");

                if (!userCountry) {
                  message.classList.add("display");
                  return false;
                } else {
                  return true;
                }

Here is my response

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating a Div on your webpage using a JQuery UI dialog: A step-by-step guide

I am currently trying to update my webpage from a JQuery UI dialog, but the code I have so far does not seem to be working. Any assistance or guidance would be greatly appreciated. function submit_new_site() { // These are the input text IDs on the ...

Which web browsers are compatible with the input attribute "multiple"?

I am currently incorporating this particular plugin, and its file input does not support multiple file selection. To address this issue, I have added the 'multiple' attribute. However, I am curious if there are any browsers or other platforms (su ...

Is it HTML True or False in the editor?

For the HTML template I'm working on, I want to implement a feature where users can toggle tags on and off easily. My idea is to make it as simple as setting a value to "true" or "false." Is there a way to achieve this within a single HTML file? ...

Trouble encountered when utilizing jQuery for XML to HTML conversion and vice versa (CDATA mistakenly transformed into HTML comments)

I am in the process of developing a plugin/bookmarklet that is designed to extract an XML document from the <textarea> element on a web page, make modifications to the XML content, and then reinsert the updated version back into the <textarea> ...

The querySelector function seems to be identifying the element with the ID "submit" and another input element of type "submit"

My code includes a function that toggles between two elements' style.display values, switching them from "none" to "block" and vice versa. However, I've encountered an unexpected issue where the behavior of the "send" button seems to be linked wi ...

Styling the navigation bar using CSS and positioning a <div> element underneath

Struggling to design a navbar using Bootstrap and have a div positioned underneath it that fills the remainder of the page? You're not alone! As someone new to Bootstrap and CSS, this can be tricky. Here's an example of how I created a navbar: ...

Looking to transfer data between files in Nodejs

This is the routes.js file I am working with const express = require('express'), router = express.Router(), loginHandler = require('../handler/loginHandler'), router.get('^/:userId/:userType/:sessId/:lang/:orgId/:merchantI ...

Platform designed to simplify integration of high-definition imagery and scalable vector illustrations on websites

In the ever-evolving world of technology, some clients support advanced features like svg while others do not. With the rise of high resolution devices such as iPhone 4+ and iPad 3rd gen., it has become crucial to deliver graphics that can meet these stand ...

Progress bar for AJAX file loading for Flash player

Looking to create a progress bar using AJAX for a flash file. Check out this demo here: I tried to analyze their page, but the JavaScript is encrypted and I'm not very skilled in JS. Any suggestions? Thank you! ...

Display the retrieved information from MongoDB onto a jade template

Upon checking the console, I see output similar to this: [ { __v: 0, city: 'on1', address: '111', first: 'user', last: 'one', chart: 'char1', doctor: 'doc1', _id: 5698a803d98f05482ba48a4b }, { __ ...

How can we link identical pages to distinct sets of data in the backend and ensure they operate effectively with their respective data?

I'm working on a project where I have a dynamic table on the front-end that gets its data from a MySQL database connected using PHP. Each row in the table has action buttons, with only a delete option for now. The styling is pretty basic as shown belo ...

When HTTP 304 meets the Cache-Control directive with a value of no-cache

I'm encountering the following response from certain web server requests: First request: HTTP/1.1 200 OK Date: Mon, 16 Jan 2012 05:46:49 GMT X-Powered-By: Servlet/2.5 JSP/2.1 Content-Type: text/plain Content-Length: 78 Content-Encoding: gzip Etag: " ...

The attribute 'subtle' is not found within the definition of 'webcrypto' type

Currently, I am working with Node v17.4 and I am looking to utilize the webcrypto API. Referencing this specific example, I am attempting to include subtle in my project, but TypeScript is throwing an error: Property 'subtle' does not exist on ...

Create a copy of a div element once the value of a select element has

After modifying a select option, I'm attempting to replicate a div similar to the example shown in this link: http://jsfiddle.net/ranell/mN6nm/5/ However, instead of my expected lists, I am seeing [object]. Any suggestions on how to resolve this issue ...

Anchoring HTTP headers in HTML tags

Currently, I am working on some code to enable dragging files from a web app to the desktop by utilizing Chrome's anchor element dragging support. The challenge I am facing is that certain file links require more than a simple GET request - they nece ...

The jQuery calendar malfunctions on desktop devices but functions properly on mobile devices

Experiencing an unusual issue with the jQuery calendar on my website. The code is within a block (widget) in the Flatsome theme on Wordpress, and I'm using the same block for both desktop and mobile versions of the header builder. Strangely, the calen ...

What components does Flex have? And how do they compare to HTML elements?

In the realm of flexibility, creating and reusing components can be a powerful tool. In this case, the ability to code a component once, style it, and then reuse it in various instances is invaluable. The beauty lies in the independence of each copy produc ...

Prevent users from clicking by using a CSS class in HTML and JavaScript

,hey there buddy 1° Can you help me figure out how to prevent click behavior using the CSS class? 2° I'm unable to add an ID to the HTML element, so I need to use the Class to achieve this. 3° None of my attempts have been successful so far. El ...

What is the best way to showcase saved HTML content within an HTML page?

I have some HTML data that was saved from a text editor, <p style=\"font-size: 14px;text-align: justify;\"> <a href=\"https://www.xpertdox.com/disease-description/Chronic%20Kidney%20Disease\" style=\"background-color: tr ...

Enable only the current week days on the multiple date picker feature

Can anyone recommend a date picker that only shows the current week and allows for multiple date selections by the user? I found this jsfiddle which limits the display to the current week, but it doesn't support selecting multiple dates. I attempted ...