Attempting to verify JavaScript input by utilizing OnClick and a custom function. Regardless of the content inputted, the system consistently confirms that the format is accurate

I am currently working on a project that involves an HTML file and an external JavaScript file. In the HTML file, there is user input and a validation button that triggers the courseValidation() function when clicked. However, I am facing an issue with the if statement in the JavaScript code. Even when the input does not match myRegExp, it always displays "Correct Format" on the page instead of "Incorrect Format". I'm still learning and would appreciate any guidance or suggestions to help me troubleshoot this issue.

Here is the structure of the files:

<html lang="en">
<head>
<title>Validation</title>
</head>
<body>
    <script src="course.js"></script>
    <p>Enter Course Information:</p>

    <input id="courseCode" type="text">
    <button onclick="courseValidation()">Validate</button>

        <p id="course"></p>
   </body>
</html>

External JavaScript File:

function courseValidation() {
var courseCode = document.getElementById("course").innerHTML;
var myRegExp = /\D{3}.\d{3}#\d{4}_\D{2}-\d{4}/;

if (courseCode.match(myRegExp)) {
    document.write("Incorrect Format");
} else {
    document.write("Correct Format");
}
}

Answer №1

You are encountering an issue in retrieving the input value correctly. To fetch the value of the input field, use

var courseCode = document.getElementById("courseCode").value;
instead of
var courseCode = document.getElementById("course").innerHTML;
.

Furthermore, your conditional if statement is incorrectly ordered. It should be structured like this:

if (courseCode.match(myRegExp)) {
    document.write("Correct Format");
} else {
    document.write("Incorrect Format");
}

Answer №2

The input ID should be courseCode instead of just course, and you are currently using .innerhtml when it should be .value

var courseCode = document.getElementById('courseCode').value

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

Effortless method for distributing NPM-loaded modules among various Browserify or Webpack bundles

Feeling frustrated trying to find a straightforward way to share code, required via NPM, across multiple Browserify or Webpack bundles. Is there a concept of a file "bridge" that can help? I'm not concerned about compile time (I know about watchify), ...

Notifying asynchronous completion using Gulp, Babel, and configuration file config.yml

My current project involves using babel and gulp for handling tasks, as well as loading a yml config file for paths. This is the content of cofing.yml: PATHS: # Path to source folder sources: "jet/static/jet_src" # Path to dist folder dist: "jet/ ...

problem with the clientHeight attribute in window event handlers

The component below is designed to react to changes in window resize based on the container height. However, there seems to be an issue where the containerHeight variable increases as the window size decreases, but does not decrease when I make the window ...

Is there a way for me to attach a link to a picture displayed in a lightbox that directs to an external ".html" file?

I have a platform where users can view images in a gallery and when they click on an image, it opens up in a lightbox. I am trying to add a feature where the opened image can be clicked again to redirect the user to an external page. I attempted to nest t ...

Unleashing the power of XPath and wildcards in AJAX

Can anyone explain why the variable objProperties, which contains an xpath with a wildcard, is coming up empty in this scenario? function getXMLServerObject (httpType, cmd, isAsync) { var object = new Array(); $.ajax({ type: httpType, ...

Step by step guide on inserting View and Delete buttons in an HTML table populated by JSON data

I've successfully loaded data from a JavaScript file in JSON format into a plain HTML table using JavaScript. Everything is working well so far. I now want to enhance the table by adding two buttons, View and Delete, that when clicked will redirect to ...

Displaying MySQL information on an EJS document including references to other tables

Check out the project on GitHub I am currently working on retrieving quiz answers from a MySQL database and displaying them in a form using EJS templating within a node.js/express application. However, I am facing challenges with correctly mapping answers ...

Values in the list of onClick events are currently not defined

I'm having trouble importing a list component into my form and capturing the onClick event to submit the information. However, every time I click on the list, the data shows up as undefined. What could I be doing incorrectly? Here is the code for my ...

Can you provide the name of the slideshow plugin used on the Wipro website?

Can anyone tell me the name of the image slide show featured on: http://www.wipro.com/index.htm? Also, does anyone know where I can find the script for free? I am looking to incorporate it into a page that is coded in php, html, css, and javascript. Than ...

Tips for keeping your Timezone in check

My situation involves a client in India and a server in the USA. When a user submits a post from India, it gets stored on the USA server, causing the post submission time to be displayed in USA time. I am looking for a solution to display the post submit ...

What sets apart Import { module } from lib and import module from lib/module in JavaScript?

I'm currently working on optimizing my vendor bundle.js file, which has gotten quite large due to my use of the material-ui library. import Card from 'material-ui'; // This is not ideal as it imports everything Could someone please explai ...

What is the best way to retrieve Firebase data and assign it to a variable in React after using setState

Working with react and firebase real-time database for the first time has been quite challenging. I'm struggling to extract the data and insert it into a constant called items. It seems like the firebase code is asynchronous, which means it executes a ...

Exploring the integration of d3 in an Express application - encountering an error: document is not recognized

I am facing a challenge in my expressjs application where I need to dynamically render vertices in a graph using d3. However, the code execution order seems to be causing issues for me. When attempting to use the d3.select function, I encounter the followi ...

The current date object in JavaScript will only display the year or a combination of the month and

$scope.articles = [ { link: "http://google.com", source: "Google", title: "hello", "date": new Date(2008, 4, 15) }, ]; <tbody> <tr ng-repeat = "article in articles | orderBy:sortType:sortReverse | filter:searchArticle ...

What is the purpose of assigning controller variables to "this" in AngularJS?

Currently, I am analyzing an example in CodeSchool's "Staying Sharp with Angular" course in section 1.5. Here is the code snippet: angular.module('NoteWrangler') .controller('NotesIndexController', function($http) { var contro ...

Guide on verifying Unicode input in JavaScript?

I am looking to create a form where the user can only input Khmer characters (Unicode characters) and display an alert if they input anything else. Khmer Name: <input type="text" class="namekh" name="namekh"> To achieve this, here is a snippet of m ...

Having issues with Cypress testing of Material-UI datepicker on Github actions

Encountering an unusual issue while running Cypress tests in a GitHub action environment. The MUI datepicker is stuck in readonly mode, preventing any input of dates (works fine in other setups). Error displayed by Cypress CypressError: Timed out retryin ...

Personalized cursor that blinks while utilizing window.history.replaceState

While navigating between sub-pages, I utilize the window.history.replaceState method to replace URLs in my web application. However, I have noticed that my custom cursor briefly blinks (replaced by cursor: default) when the current URL is replaced with a n ...

Should the hourly charge schedule be based on user input and be created from scratch or utilize existing templates?

I have hit a roadblock while creating a charging schedule based on user input for my project. I am debating whether to search for and modify an existing plugin or develop it from scratch. The schedule involves solar charging electric cars between 7am and ...

Phone Validation for Contact Form 7

Recently, I was tasked with creating a landing page for a job interview. The challenge was to include validation on the phone number field so that it has to be between 9 and 10 numbers in length, along with another validation requiring the phone number t ...