Form does not require empty fields

Question

I have a form that all fields are set to required. When I press the save button, it saves the input values into local storage. But Save button still saves even though there are empty fields. Here is the code:

<form class="column-full item" id="input-form">
            <label for="image-url" required >Image URL: </label><br>
            <input oninput="loadImage()"  class="row" type="text" id="image-url" placeholder="Type the URL of your image" required /><br>
            <label for="image-title">Title: </label><br>
            <input class="row" type="text" id="image-title" required /><br>
            <label for="image-details">Notes: </label><br>
            <input class="row" type="text" id="image-details" required /><br>
            <button onclick="saveInput()" class="row" type="submit" value="Save" id="btn_save">Save</button>
</form>

<script>
let journalPages = [];
    function saveInput(events){
      let newPage={
        id: Date.now(),
        imageURL: document.getElementById('image-url').value,
        imageTitle: document.getElementById('image-title').value,
        imageDetails: document.getElementById('image-details').value
      }
      
      journalPages.push(newPage);               //Add the new entry object to the array
      document.querySelector('form').reset();   //Clear the form

      console.warn('added', {journalPages});

      localStorage.setItem('MyPage', JSON.stringify(journalPages));
</script>

Answer 1

It's the "submit" side of things that invokes the browsers ability to throw "required" errors. You're hooking in with onclick before that has fired.

You should validate these fields yourself for cross-compatibility or instead of putting onclick on the button, put onsubmit="return saveInput(this.form)" on the tag

I personally don't rely on HTML5 form validation in anyway whatsoever as it's as simple as modifying the code via element inspector and removing the required attribute.

HTML5 also provides a " checkValidity " method, which you can use to halt your script, but you will have to pass the form through your function:

if (typeof form.checkValidity !== 'undefined' && form.checkValidity()) {
   // ....
}

Answer 2

This happens because you'r listening for any click event on your form button, so when the click happens your function saveInputs will be called.

Here is what you should do:

• Remove the onclick event from the button element
• Add the onsubmit="saveInput()" to your form element

This way the savedInput function will only be called when the form is able to be submitted (all fields filled and matching the rules)

<form onsubmit="saveInput()" class="column-full item" id="input-form">
            <label for="image-url" required >Image URL: </label><br>
            <input oninput="loadImage()"  class="row" type="text" id="image-url" placeholder="Type the URL of your image" required /><br>
            <label for="image-title">Title: </label><br>
            <input class="row" type="text" id="image-title" required /><br>
            <label for="image-details">Notes: </label><br>
            <input class="row" type="text" id="image-details" required /><br>
            <button class="row" type="submit" value="Save" id="btn_save">Save</button>
</form>

let journalPages = [];
function saveInput(events){
  let newPage={
    id: Date.now(),
    imageURL: document.getElementById('image-url').value,
    imageTitle: document.getElementById('image-title').value,
    imageDetails: document.getElementById('image-details').value
  }

  journalPages.push(newPage); //Add the new entry object to the array
  document.querySelector('form').reset();   //Clear the form

  console.warn('added', {journalPages});

  localStorage.setItem('MyPage', JSON.stringify(journalPages));
};

Here is the jsfiddle of your code working as intended: https://jsfiddle.net/emycrzbk/1/