JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<form class="js-validate">
    <input value="Value 1"/>
    <input placeholder="Value 2"/>
    <input value="Value 3" placeholder="Value 4"/> 
    <button>Submit</button>
</form>

CSS

.broken{
    border: 1px solid red;
}

JavaScript

var formValidation = function(){
	$(".js-validate").each(function(){
		var form = $(this);
        var inputs = form.find("input");
		console.log(form);
        
        form.on("submit", function(event){
			var result = validateForm();
            inputs.removeClass("broken");
			if(result.length > 0){
                for(var i = 0; i < result.length; i++){
                    result[i].addClass("broken");
                }
                event.preventDefault();
                alert("no good");
			}   
		});
		
		function validateForm(){
            var broken = [];
			inputs.each(function(){
				var input = $(this);
				var defaultValue = input.attr("value");
                if(defaultValue === undefined){
                    defaultValue = input.attr("placeholder");
                }
				var newValue = input.val();
                console.log(defaultValue+" : "+newValue);
				switch(newValue) {
					case defaultValue:
                        broken.push(input);
						break;
					case "":
                        broken.push(input);
						break;
					case null:
                        broken.push(input);
						break;
					default:
						return true;			
				}
			});
            return broken;
		}
	});
}
formValidation();