What is causing this form and validation to malfunction?

Question

What is causing this form and validation to malfunction?

I've been honing my skills in basic programming using Bootstrap, HTML, CSS, and JavaScript. Currently, I'm working on a website that begins with a landing page prompting for a password before redirecting to another page.

The issue I'm encountering is that the form and JavaScript validation are not syncing up correctly. I'm unsure of what's causing this problem or where I may be going wrong. Any assistance would be greatly appreciated! Thank you!

<div class="jumbotron">
  <form name="PasswordField" action="">
    <div class="form-group">
      <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
      <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
    <button type="submit" onclick="isValid()" class="btn btn-default">Submit</button>
  </form>
</div>

<script type="text/javascript">
  function isValid(password)
  {
    var pass ="seahorse";
    var password = document.getElementById("password");

    if (password.value.toUpperCAse().match(pass))
    {
      window.location.href = "HappyChristmas.html";

      return true;
    }
    else
    {
      alert('Nope, try again');

      return false;
    }
  }
</script>

javascript bootstrap-4

Answer 1

Answer №1

Make sure to call the isValid() function when submitting the form.
Your code transforms the input value using toUpperCase() and then checks if it matches a password in lowercase like "seahorse".

I have created a snippet based on your code, and it seems to be working perfectly fine.

I included an onclick event on your submit button to trigger the isValid() function.

It's worth noting that you are passing a parameter to the isValid() function, but it's not necessary as you can directly access the password element and its value within the function.

Additionally, you are returning a boolean from the function, which is unnecessary since there are no conditional statements in your script. When using functions like window.location.href or alert(), the code will stop executing anyway.

function isValid()
{
    var pass = "seahorse";
    var password = document.getElementById("password");

    if (password.value.match(pass))
    {
        window.location.href = "HappyChristmas.html";
    }
    else
    {
        alert('Nope, try again');
    }
}

<div class="jumbotron">
  <form name="PasswordField" action="">
    <div class="form-group">
      <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
            <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
    <button type="submit" onclick="isValid()" class="btn btn-default">Submit</button>
  </form>
</div>

Answer 2

Make sure to call the isValid() function when submitting the form.
Your code transforms the input value using toUpperCase() and then checks if it matches a password in lowercase like "seahorse".

I have created a snippet based on your code, and it seems to be working perfectly fine.

I included an onclick event on your submit button to trigger the isValid() function.

It's worth noting that you are passing a parameter to the isValid() function, but it's not necessary as you can directly access the password element and its value within the function.

Additionally, you are returning a boolean from the function, which is unnecessary since there are no conditional statements in your script. When using functions like window.location.href or alert(), the code will stop executing anyway.

function isValid()
{
    var pass = "seahorse";
    var password = document.getElementById("password");

    if (password.value.match(pass))
    {
        window.location.href = "HappyChristmas.html";
    }
    else
    {
        alert('Nope, try again');
    }
}

<div class="jumbotron">
  <form name="PasswordField" action="">
    <div class="form-group">
      <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
            <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
    <button type="submit" onclick="isValid()" class="btn btn-default">Submit</button>
  </form>
</div>

Answer 3

Answer №2

Start off by adding the event to the form in order to trigger your JavaScript function

<form name="PasswordField" action="/where/to/go" onsubmit="return isValid()">

Next, eliminate the argument from the function definition

function isValid(password){ ... }

as it is being replaced with the DOM node (

var password = document.getElementById("password");

)

Afterwards, modify this line of code

if (password.value.toUpperCAse().match(pass)){

to the following

if (password.value.toUpperCase() == pass.toUpperCase()){

Answer 4

Start off by adding the event to the form in order to trigger your JavaScript function

<form name="PasswordField" action="/where/to/go" onsubmit="return isValid()">

Next, eliminate the argument from the function definition

function isValid(password){ ... }

as it is being replaced with the DOM node (

var password = document.getElementById("password");

)

Afterwards, modify this line of code

if (password.value.toUpperCAse().match(pass)){

to the following

if (password.value.toUpperCase() == pass.toUpperCase()){

Answer 5

Answer №3

In this scenario, there are two main issues that need to be addressed: 1. The isValid function is not being called from any part of the code. 2. There is no parameter named password being passed into the function.

<div class="jumbotron">
        <form name="PasswordField" action="">
          <div class="form-group">
            <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
            <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
          <-- Add an ID to the button -->
          <button type="submit" id="submitBtn" class="btn btn-default">Submit</button>
        </form>

<script type="text/javascript"
            const pass ="seahorse"
            const password = document.getElementById("password");

            const submitBtn = document.getElementById("submitBtn");
            submitBtn.addEventListener("click", e=>{
              e.preventDefault();
              isValid(password);
            })

            function isValid(passInput) {
                if (passInput.value.toLowercase().match(pass)) {
                    window.location.href = "HappyChristmas.html";
                    return true;
                } else {
                    alert('Nope, try again');
                    return false;
                }
            }
</script>

Answer 6

In this scenario, there are two main issues that need to be addressed: 1. The isValid function is not being called from any part of the code. 2. There is no parameter named password being passed into the function.

<div class="jumbotron">
        <form name="PasswordField" action="">
          <div class="form-group">
            <label for="exampleInputPassword1"><h4>If you're an octopus I am...</h4></label>
            <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
          <-- Add an ID to the button -->
          <button type="submit" id="submitBtn" class="btn btn-default">Submit</button>
        </form>

<script type="text/javascript"
            const pass ="seahorse"
            const password = document.getElementById("password");

            const submitBtn = document.getElementById("submitBtn");
            submitBtn.addEventListener("click", e=>{
              e.preventDefault();
              isValid(password);
            })

            function isValid(passInput) {
                if (passInput.value.toLowercase().match(pass)) {
                    window.location.href = "HappyChristmas.html";
                    return true;
                } else {
                    alert('Nope, try again');
                    return false;
                }
            }
</script>

What is causing this form and validation to malfunction?

Answer №1

Answer №2

Answer №3

Similar questions

How can we reset multiple selected values (mui chips) in a React Material-UI Autocomplete field when changing the value in a different field?

Display a dialogue box when encountering a Vuetify error. Only open the dialogue box under certain conditions

Exploring Ways to Navigate to a Component Two Steps Back in Angular

What is the best method for storing a JavaScript widget with analytics - should it be done dynamically or statically?

Instantly see changes without having to manually refresh the screen

Obtain the final value within a URL's path segment

Personalized HTML Input Field for Digital Keyboard Scores

Accessing the locally stored data and displaying it in ng-bind

Combining Two JSON Arrays Featuring Unique Keys

Creating a specific type of table using Ruby on Rails

java printwriter not cooperating with javascript

Calculating and modifying a specific value in my local storage using JavaScript

What is the best way to distribute a function within a div container?

React State Displays Incorrect Value of False Instead of True

Manipulate audio files by utilizing the web audio API and wavesurfer.js to cut and paste audio

retrieving serialized object from an ajax request sent to the web server

Having issues integrating Soundcloud iframe into Bootstrap 4

JavaScript's inability to load images lazily poses a significant challenge

Guide on transferring images from user interface to server

Are there issues with the flex-grow-1 behavior in Visual Studio or possibly Razor?