Validating different types of form inputs with criterias

Question

I want to get the answers to a form upon submission and parse them to JSON. This works quite good but I want some validation before sending the data. I tried a lot of variations of the snippet down below but am still stuck.

Steps:

Prevent default event on "send"
Get Form
Iterate through the elements of the form
Eliminate empty items and their value
If checkbox is checked: value = true
Store correct items in data
Return data

Somehow I can't get to work steps 4 and 5 work at the same time, every time I get one of them to work I screw over the other one.

In this snippet, the checkbox works as intented but the textfield doesn't:

If anybody can point me in the right direction with the if/else statements or something like that it would be greatly appreciated.

document.addEventListener('DOMContentLoaded', function(){
var data = {};

var formToJSON = function formToJSON(form) {
 var data = {};
    for (var i = 0; i < form.length; i++) {
      var item = form[i];


         //looking for checkbox

            if (item.value =="") {
                continue;
            }
            else {
                if (item.checked == false) {
                    data[item.name] = false;
                }
                else {
                data[item.name] = item.value;
                }
            }
    }
return data; };

  var dataContainer = document.getElementsByClassName('results__display')[0];
  form = document.getElementById('formular').querySelectorAll('input,select,textarea');
  butt = document.getElementById('knopfabsenden');
  butt.addEventListener('click', function (event) {
    event.preventDefault();
      handleFormSubmit(form = form);
  });

  var handleFormSubmit = function handleFormSubmit(event) {
    var data = formToJSON(form);
    dataContainer.textContent = JSON.stringify(data, null, "  ");
    }

}, false);

<div id="formular">
<label class="formular__label" for="machineName">Textfield Test</label>
<input class="formular__input formular__input--text" id="machineNumber" name="machineNumber" type="text"/>

<br>
<input class="formular__input formular__input--checkbox" id="checkTest" name="checkTest" type="checkbox" value="true"/>
<label class="formular__label formular__label--checkbox" for="checkTest">Checkbox Test</label>
<br>
<button class="formular__button" id="knopfabsenden" type="submit">Submit</button>
</div>

<div class="results">
  <h2 class="results__heading">Form Data</h2>
  <pre class="results__display-wrapper"><code class="results__display"></code></pre>
</div>

score 1 · Accepted Answer · answered May 01 '18 at 13:41

The problem is .checked will always be false if it doesn't exist. So the text field gets the value false.

for (var i = 0; i < form.length; i++) {
  var item = form[i];


     //looking for checkbox

        if (item.value ==="") {
            continue;
        }
        else {
            if (item.type === "text") {
                data[item.name] = item.value;
            }
            else if (item.type === "checkbox"){
                data[item.name] = item.checked;
            }
        }
}

In this code snippet I check the type of the input and handle it accordingly. also notice I use the === operator and not the == operator as a best practice (Difference between == and === in JavaScript)

Validating different types of form inputs with criterias

1 Answers1