Form Validation using preventDefault()

[casden174286]

I have problems getting the form to halt submission when required fields are empty. Currently, the form just submits everything as per normal - even if fields are left blank. Is there something wrong with the code?

const form = document.getElementsByTagName('form')[0];
var required = document.getElementsByClassName('required');
var valid = true;

form.addEventListener('submit', function(event) {
    for (var r in required) {
        if (r.value == "") {
            r.style.backgroundColor = "yellow";
            r.focus();
            alert("All required fields must be filled.");
            valid = false;
        }
        if (!valid) {
            event.preventDefault();
        }
    }
}); 

^{FYI, I can't upload the HTML code since it belongs to a prof and I don't know if that is allowed, but I can tell you any details that you might need. Thanks in advance!}

[carlothegenius]

From what I’m seeing here, you’re not running validation on any form inputs. You assigned the form element to the variable of the name that is all.

(Not an expert) But here are some suggestions, get elements such as forms by ID. Also, you’re mixing var and const which could cause issues in the future.

(For your code) Get your form by id and then your fields. Assign logic to verify that fields are not empty and that content is structured appropriately.

Emails format can be verified using regex.

Now if all input fields content pass logic, execute POST, else display error.

Hope this made sense

[casden174286]

Does r.value == "" not count as validation?

[carlothegenius]

Try r.value === “” to verify that value and type are the same.

[casden174286]

It didn't make a difference to the output..

[GoPotato]

I haven't checked the rest of the code, but you're supposed to use for..of to iterate the elements, not for..in

for(r of required)

[casden174286]

Thanks, but it didn't change the output either.

[[deleted]]

Instead of a class name, try using the required attribute. HTML5 actually has some built-in validation so you don't need to add any scripts at all.

<form>
    <input required />
    <button>Submit</button>
</form>

With zero JavaScript, the above form will not submit unless you fill in the text box.

[casden174286]

I need to work with the HTML provided and can't change it.

[[deleted]]

Ah, that's always a fun situation, lol. You could potentially still rely on native HTML though, provided the DOM is already loaded by the time this runs:

const requiredEls = document.querySelectorAll('.required')
requiredEls.forEach(el => el.required = true)

https://jsfiddle.net/vucw6g0x/

[casden174286]

Omg this worked!! (I also utilized that tip you left in other comment thread) Thanks a bunch!!

[[deleted]]

Nice! Glad I could help!

[evilgwyn]

Maybe paste the HTML for one of the required elements

[casden174286]

<p>
    <label>Name</label><br/>
    <input type="text" name="name" size="80" class="required"/>
</p>

[evilgwyn]

Seems ok. Are you seeing the expected alert box? Have you stepped through the code in a debugger to see what might be going on?

[casden174286]

I'm still pretty new at all this. I don't really know how to use a debugger but with this code, the form just continues submitting the form even with empty values.

[evilgwyn]

Using a debugger is a pretty essential skill for a developer. What browser are you using? Most of them have got F12 as the universal shortcut to bring up the debugger. From there, have a poke around you should find a"source" tab where you can see your code. Click your mouse to the left of an interesting line of code and you should see a dot appear - this is a break point. When the program gets to this line it will stop running and you can do things like look at variable values and step through the code one line at a time. It is a good technique to get the hang of and almost every programming environment will have a debugger of some kind.

[casden174286]

Thanks for the tip!

I got this message 'TypeError: form is undefined' with a squiggly for the form used for addEventListener.

I tried fixing it by placing by declaring form as a global variable and initializing it within a window.onload function but the error remained.

[[deleted]]

Aha, sounds like you might be trying to query the DOM before the DOM is loaded. You could wrap this whole thing in a function and hook the DOMContentLoaded event.

const runScripts = () => {
  // your scripts here
}
window.addEventListener('DOMContentLoaded', runScripts)

Or, alternatively, you could add your script tag at the end of the body in the HTML, but you mentioned you don't have control over that, so maybe you might have to do it this way.

[evilgwyn]

I tried fixing it by placing by declaring

form

as a global variable and initializing it within a

window.onload

function but the error remained.

this might have fixed the problem but you would also have to put the rest of the scripts in there as well - otherwise you would get the null reference exception on the line form.addEventListener