How to preventDefault in forms?

Question

I have a form with some inputs, and I want to make an js validation for that form. But, preventDefault is not working for me.

HTML Code

<form action="" id="form">
    <h2>Send us a message</h2>
    <div class="input-box" id="nameInputBox">
        <small class="errorMsg-hidden">error msg</small>
        <input type="text" name="" required id="name">
        <span>Name</span>
    </div>
    <div class="input-box">
         <input type="submit" name="" value="Nosūtīt" id="submit">
     </div>
</form>

JS Code

const form = document.getElementById('form');
const name = document.getElementById('name');

form.addEventListener('submit', (e) => {
    e.preventDefault();
});

In this case, it is important to keep the required attribute in html, because some of styling depends of :valid pseudo class.

Is there any solution here?

"it is important to keep the required attribute in html"? You haven't changed an attribute. You don't even have an input type submit or button. — StackSlave, Jan 05 '21 at 00:48
oh, sorry, i forgot to add submit button code to form code I added here. Edits made. @StackSlave — predefined_, Jan 05 '21 at 00:51
When you `eventObject.preventDefault()` on submit of a `
` it stops submission. You are supposed to use `FormData` with the `XMLHttpRequest`. — StackSlave, Jan 05 '21 at 00:54
Given your comment on Tiffany's answer, your question is really about custom error messages; `.preventDefault()` isn't the real issue. — Stephen P, Jan 05 '21 at 01:03
Have you read the answers to this question: https://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message? Given your apparent focus on custom error messages, this would seem to address your problems? — David Thomas, Jan 05 '21 at 01:06

Tiffany · Answer 1 · 2021-01-05T01:17:11.383

2

You can add e.stopPropagation();

const form = document.getElementById('form');
const name = document.getElementById('name');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    e.stopPropagation();
});

<form action="" id="form">
<h2>Send us a message</h2>
<div class="input-box" id="nameInputBox">
    <small class="errorMsg-hidden">error msg</small>
    <input type="text" name="" required id="name">
    <span>Name</span>
</div>
</form>

Question was little bit confusing. May be this will work... "user" is valid username (Just for test)

const form = document.getElementById('form');

var subMit = function(event) {
    let name = document.getElementById('name');
    if(name.value === "user"){
        document.getElementById('ChangeName').textContent = name.value;
      document.getElementById('errorMsg-hidden').textContent = "Looks Good";
    }else{
        document.getElementById('errorMsg-hidden').textContent = "Validation Error";
    }
    event.preventDefault();
};

form.addEventListener("submit", subMit, true);

<form action="" id="form">
<h2>Send us a message</h2>
<div class="input-box" id="nameInputBox">
    <small id="errorMsg-hidden">error msg</small><br>
    <input type="text" name="" required id="name"><br>
    <span id="ChangeName">Name</span>
    <br/>
    <input type="submit" value="Submit">
</div>
</form>

edited Jan 05 '21 at 01:17

answered Jan 05 '21 at 00:49

Tiffany

487
2
13

Thank your for your answer, but this did not help me this time – predefined_ Jan 05 '21 at 00:53
1

And in what way did it "not help"? What do you require that this answer didn't resolve? How is Tiffany meant to improve her answer if you don't explain where her attempt failed, and what's necessary? – David Thomas Jan 05 '21 at 00:57
When I press the Submit button of my form, I want to add custom error messages, if the values of inputs do not validate. With code provided by Tiffany, form is still showing default error messages, if the values of inputs do not validate. Actutally, they even do not validate at all, if I have one of the fields empty. It just keeps showing the default error message, that the certain field cannot be empty. @DavidsaysreinstateMonica – predefined_ Jan 05 '21 at 01:00
You shouldn't (don't) need `.stopPropagation()` to prevent the form submission — the `.preventDefault()` should do it. In fact, I can not reproduce the OP's issue; if I put that exact HTML and code on my local webserver it _does_ prevent the form submission. – Stephen P Jan 05 '21 at 01:01
1

@predefined: "*with code provided by Tiffany, form is still showing default error messages*" - because that wasn't mentioned in your question, and is therefore not addressed in Tiffany's answer. Can you please edit your question to explain in detail what you want to achieve? And how/where your current code fails, that way people can try to help. – David Thomas Jan 05 '21 at 01:04
It's `window.onsubmit = function(event) {event.preventDefault();}` though close enough. :-) – John Jan 05 '21 at 03:57

score 0 · Answer 2 · answered Jan 05 '21 at 01:04

0

If you want to apply some css when your input is valid or not, just bind each input to a onChange(). Check validity through these functions and when one input is valid or not juste add to it a specific css class. You don't need :valid anymore.

answered Jan 05 '21 at 01:04

Waytaria

109
1
7

Your statement seems odd to me, because built-in form validation and `:valid` pseudo-attribute exist so don't have to add onChange handlers to everything, not the other way around. Listening for every _change_ event is the _bad old way_ of doing form validation. – Stephen P Jan 05 '21 at 01:13

How to preventDefault in forms?

2 Answers2