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

Leveraging the power of ExpressJs to incorporate a dynamic Navbar onto

ExpressJS and EJS are my chosen technologies for creating Views. When it comes to the navigation bar, I want to add a class="active" to the links that represent the current page. However, if I use partials in my views, how can I achieve this? Here is a q ...

Send form information using the REST method

Can someone provide guidance on how to properly handle this endpoint in my code? @PostMapping("/createUser") public ResponseEntity<User> createUser(@RequestBody User user) {...} I am looking to implement a user creation feature on my HTML ...

HTML5 Slideshow with Smooth Image Transitions

So, I have created an HTML5 image slideshow and it's working perfectly on my localhost. However, I am puzzled as to why there is no transition effect within the slideshow. I was expecting something like fading out the first picture and then having the ...

How to use Axios in Vue JS to access an array within a JSON object

Struggling to access arrays inside a JSON object and save them into separate arrays. Despite trying various methods, I have not been successful in retrieving these arrays. I suspect that my approach to accessing arrays within the JSON object is incorrect, ...

Karma and RequireJS fetching files beyond the base URL

My goal is to set up automatic testing using karma with the following file structure: /assests /css /font /img /js /collection /lib /model /plugin /spec /view test-main.js main.js /templates index.html karma.conf.js In my ...

jQuery draggable elements can be easily dropped onto droppable areas and sorted

I need help with arranging the words in the bottom tiles by sorting them from "Most Like Me" to "Least Like Me" droppable areas. Currently, I am able to drag and drop the words into different boxes, but it ends up stacking two draggable items on top of eac ...

What steps should be taken to correct the misalignment of the closing x symbol in the alert box?

After making adjustments to the line height, the closing x mark on the right now aligns closer to the bottom of the alert message box. I am currently utilizing Bootstrap version 5.0.1. Is there a way for me to vertically center the x mark? Thank you. CSS: ...

The webpage's Document Object Model fails to refresh following a JavaScript modification

I have encountered an issue with a sample webpage where I am attempting to set the wmode of all YouTube elements on the page to "transparent." When inspecting the page using Chrome, I can see that my JavaScript code is functioning properly. However, the b ...

Displacement occurs when the input tag is eliminated

After some trial and error, I have discovered that removing the input tag from the label causes a change in the layout height. I am puzzled as to why this is happening. Could there be a special reason for this height alignment issue when an input tag is pl ...

Terminate child process with specified user ID using the Forever-monitor

Whenever I need to create new child node processes, I use the following code: var forever = require('forever-monitor'); function startNodeProcess(envVariables, jsFileName, uid) { var child = new (forever.Monitor)(jsFileName, { ...

Is it possible to retrieve several columns using the pluck method in Underscore.js following the input from the where method, similar to LINQ

var persons = [ {name : "Alice", location : "paris", amount : 5}, {name : "Bob", location : "tokyo", amount : 3}, {name : "Eve", location : "london", amount : 10} ]; var filteredResults=_.pluck(_.where(persons, {location : "paris"}), 'nam ...

Ineffectiveness of Less Guard feature

I have a mixin with a guard clause that I've implemented following the provided guidelines. According to the syntax below, @palette should be selected from a list of custom colors and @color should be assigned a value from a specific set. The curren ...

Positioning the sDom in jQuery DataTables

Take a look at the image below: I want to adjust the position of the tableTools buttons (Copy, Excel, CSV) so that they appear aligned with the Search Box. I've experimented with different sDom parameters but haven't been successful. This is th ...

Checking for the existence of a row in Node.js using Sqlite3

Wondering if it's possible to verify the existence of a row using node.js and the sqlite module. I currently have this function in place, but it always returns false due to the asynchronous nature of the module. function checkIfRowExists(username, pa ...

Create a time of 00:19:59 using JavaScript

I am attempting to display a countdown timer that starts at 20 minutes in the format (00:20:00) using setInterval. Once the countdown is finished, it should display as (00:00:00), but I am having trouble achieving this. <body onload = "onloadFunc();" ...

Verify if the screen is in full view by monitoring document.fullscreenElement within Vue3

Is there a way to determine when the document is in fullscreen mode? I attempted to monitor document.fullscreen with the following code, but it was not successful: watch(document.fullscreenElement, (newValue) => { fullScreenActivated.value = newValue ...

Add axios requests to the axios.all array

Good evening. I am currently trying to insert an array into the axios.all([]) structure! This is the code snippet I am working on: app2.js new Vue({ el: '#central', data: { estilo: 'resize:none;text-align:center;color: ...

Use jQuery to swap out two div classes within a table cell (TD) if they are

Although I'm making progress, I must confess that jQuery and CSS are not my strong suits. The objective: To create a dynamic div within a table data cell for a calendar feature. The content of the div varies based on the date range input. A filled d ...

Gaining entry to specialized assistance through an occasion

Having trouble accessing a custom service from a custom event. Every time the event is fired, the service reference turns out to be null. @Component({ selector: "my-component", template: mySource, legacy: { transclude: true } }) export class myComponent { ...

How can I ensure that my style.scss file effectively interacts with my stylesheet by including imports for "variables", "globals", and "header"?

Currently, I am in the process of learning how to utilize Sass and JavaScript through VS Code. Within my project structure, I have an "app" folder where my js folder resides containing script.js, as well as a scss folder holding _globals.scss, _header.scss ...