Why this form and this validation don't work

form validation
html form validation example
form validation ux
form validation messages example
validation messages list
jquery form validation
server side validation example
html5 form validation javascript

I have been practicing basic programming with Bootstrap, HTML, CSS, and JavaScript and for the moment I'm doing a website that starts with a landing page that asks for a password and then sends you to another page.

The thing is that the form and the JavaScript validation aren't working together and I don't know why and what I'm doing wrong, so If someone could help me it would be awesome! Thanks!

<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>

First Add the event to the form to call your javascript function

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

Second remove the argument from the function definition function isValid(password){ ... } because you are overwriting it with the dom node (var password = document.getElementById("password");)

Third this can be changed

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

to this

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

Why Form Validation is Critical to Securing Your Web Forms , one of the main causes of security vulnerabilities. It exposes your website to attacks such as header injections, cross-site scripting, and SQL injections. Why Validate? This document attempts to answer the questions many people have regarding why they should bother with Validating their web sites and tries to dispel a few common myths.

  1. You're not calling isValid() when submitting the form.
  2. You're transforming your input value toUpperCase() and checking if it matches a lowercase password "seahorse".

Check the snippet I made according to your code and it's running fine and dandy.

I added onclick call on your submit button so that it calls your isValid() function.

Also it's worth mentioning that you're passing a parameter to your isValid() function, but you don't need to because you're retrieving the password element and its value directly inside the function.

Another thing worth mentioning is that you're returning a boolean for the function but you don't really need to because you're not doing conditions in your script and when changing location on window.location or alert() the code will be stopped.

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>

JavaScript - Form Validation, But even if you don't use inline validation, there are a few ways to make your forms more pleasant anyway. Here are some best practices. The reason they feel this way can be due to the beliefs they have formed around validation. And these beliefs will be a consequence of what they have learnt from others. It is not uncommon for people to say that one should not seek validation from anyone, and how this need needs to be completely removed.

Two reasons: 1. You're not calling the isValid function from anywhere and 2. You don't have a argument password to add into the function. Give this a try:

<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();
            })

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

Differentiate between client side validation and server side validation, You should override it to handle validation logic that you can't or don't want to put in a validator. The run_validators() method on a Field runs all of the field's  Server Validation. The HTML5 form validation techniques in this post only work on the front end. Someone could turn off JavaScript and still submit jank data to a form with the tightest JS form validation. To be clear, you should still do validation on the server. How you display those errors to a user is up to you.

Form Validation: Why It Matters and How to Get It Right, What is form validation? Go to any popular site with a registration form, and you will notice that they provide feedback when you don't enter your  Submit form. Back. Psychology Today. Home When your best friend or a family member makes a decision that you really don't think is wise, validation is a way of supporting them and

Form and field validation | Django documentation, Positive inline validation removes some cognitive load from users since they don'​t have to review and validate the form for errors before  The goal of web form validation is to ensure that the user provided necessary and properly formatted information needed to successfully complete an operation. In this article we will go beyond the validation itself and explore different validation and error feedback techniques, methods and approaches.

Client-side form validation, Note that the label also displays “(required)”, to inform users that don't use assistive technology or use older web browsers that do not support the HTML5 required  The HTML5 form validation process is limited to situations where the form is being submitted via a submit button. The Form submission algorithm explicitly says that validation is not performed when the form is submitted via the submit() method.

Comments
  • Where is isValid called?
  • I know you're just practising, but I assume you realise this doesnt actually provide any actual security? The user can just visit HappyChristmas.html directly without coming to your landing page. And they can disable or alter all this JavaScript in a moment even if they do come to the landing page. Or just read the password from the page source. if you want to practice doing some meaningful authentication, you would need to learn a server-side language as well.
  • Well, I'm just starting and I'm making this just to be able to practice some very very basic programming but I will have your advice in mind I put that in my study list. Thanks!
  • small thing, but isValid(password)...there's no need for the password argument here in your example, since you go and get it direct from the field later, and anyway you're not passing a value to it in the onlick.
  • Yeah I realized that. Though I was editing my answer while you commented on it. Thanks though.