prevent blank form submission

Question

If I want to prevent my form to be submitted if the fields are blank and highlight the blank fields.The code I have so far works if I try to submit when it is blank but doesnt submit if the fields are filled. I cannot seem to figure out what I am doing wrong. Please help

JavaScript code:

function CheckFields(){
    if((document.getElementById('title').value=="") || (document.getElementById("textfield").value=="")){
        const element = document.querySelector('form');
        element.addEventListener('submit',event =>{
            event.preventDefault();

            alert("Fill the form to be submitted");
            document.getElementById("title").style.backgroundColor=red;
            document.getElementById("title").style.backgroundColor=red;
        });
    }

HTML:

<input name="post" type="submit" value="Post" onclick="CheckFields();">

Check out: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation — ControlAltDel, May 01 '20 at 18:52
And this: https://www.w3schools.com/html/html_form_attributes.asp — ControlAltDel, May 01 '20 at 18:59
Does this answer your question? [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — Tad Wohlrapp, May 01 '20 at 19:03

score 1 · Answer 1 · answered May 01 '20 at 18:55

Re-posted from: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation for the purposes of having the a static answer to this question, as the webpage may change

Using built-in form validation One of the most significant features of HTML5 form controls is the ability to validate most user data without relying on JavaScript. This is done by using validation attributes on form elements. We've seen many of these earlier in the course, but to recap:

required: Specifies whether a form field needs to be filled in before the form can be submitted. minlength and maxlength: Specifies the minimum and maximum length of textual data (strings)

min and max: Specifies the minimum and maximum values of numerical input types

type: Specifies whether the data needs to be a number, an email address, or some other specific preset type.

pattern: Specifies a regular expression that defines a pattern the entered data needs to follow.

score 0 · Accepted Answer · answered May 01 '20 at 18:59

In general that is a wrong way to validate fields, but anyhow your error is the order of the condition and form submit event. So it should be like this:

var myForm = document.querySelector('form');
var myTitle = document.getElementById('title');
var myTextfield = document.getElementById('textfield');
myForm.addEventListener('submit', event=>{
     if(myTitle.value=="" || myTextfield.value==""){
         alert("Fill the form to be submitted");
         myTitle.style.backgroundColor=red;
         myTextfield.style.backgroundColor=red;
         return false;
     } else {
         return true;
     };
});

Alfred Wallace · Answer 3 · 2020-05-01T19:16:22.220

You can add required to input fields for client-side validation. For more advanced validation, you may want to add server-side validation via a model.

See required in action:

            <form action="/action_page.php">
                <label for="fname">First name:</label><br>
                <input type="text" id="fname" name="fname" value="" required><br>
                <label for="lname">Last name:</label><br>
                <input type="text" id="lname" name="lname" value="Doe"><br><br>
                <input type="submit" value="Submit">
            </form>

score 0 · Answer 4 · answered May 01 '20 at 20:41

You can validate a form in many ways. In Html 5 form you can add required for client side validation. You can also validate form from server side. And you can also use ajax for realtime form validation. Use focus on the field.. to highlight a field that is not filled.

prevent blank form submission

4 Answers4