JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<form class="c-form">
    <label class="c-form__label">Your Name:</label>
    <input type="text" name="inputText" class="c-form__input">
    
    <label class="c-form__label">Notes:</label>
    <textarea name="inputTextarea" class="c-form__input"></textarea>
    
    <div class="c-form__validation-errors c-form__validation-errors--hidden js-errors"><strong>Error:</strong> You didn't fill out all of the fields!</div>    
    <button type="submit" class="c-form__input">Submit Form</button>
</form>

SCSS

.c-form {
    
   &__label {
       line-height: 2;
   }
   
   &__input {
       display: block;
       margin-bottom: 1rem;
   }
   
   &__validation-errors {
       color: #ff0000;
       margin-top: 1rem;
       margin-bottom: 1rem;
       
       &--hidden {
           display: none;
       }
   }
}

JavaScript

var $form = $("form");
var $validationErrors = $(".js-errors", $form);

$form.on("submit", function(e) {
    e.preventDefault();
    
    $validationErrors.hide();
    
    var inputs = $(this).serializeArray();
    
    console.log(inputs);
});






























/*
// ES6 example
const form = document.querySelector("form");
const validationErrors = form.querySelector(".js-errors");
const formInputs = Array.from(form.querySelectorAll("input, textarea"));

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

    validationErrors.classList.add("c-form__validation-errors--hidden");

    const inputs = formInputs.map(input => {
        return {
            name: input.name,
            value: input.value
        };
    });

    if (!inputs.every(input => input.value)) {
        validationErrors.classList.remove("c-form__validation-errors--hidden");
    }
});
*/