JSFiddle - React, Tailwind, and code Playground

by jackwanders

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<form id="myForm" method="post">
    <input type="text" name="a" id="a"><br>
    <input type="email" name="b" id="b"><br>
    <input type="checkbox" value="1" name="c" id="c"><br>
    <input type="radio" id="d1" value="1" name="d">
    <input type="radio" id="d2" value="2" name="d"><br>
    <select id="e" name="e">
        <option value="">&nbsp;</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select><br>
    <textarea id="f" name="f"></textarea><br>
    <input type="file" id="g" name="g"><br>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

CSS

body { margin-top: 20px; }

JavaScript

function checkFields(form) {
        var checks_radios = form.find(':checkbox, :radio'),
            inputs = form.find(':input').not(checks_radios).not('[type="submit"],[type="button"],[type="reset"]'); 
        
        var checked = checks_radios.filter(':checked');
        var filled = inputs.filter(function(){
            return $.trim($(this).val()).length > 0;
        });
        
        if(checked.length + filled.length === 0) {
            alert('no fields filled out!');
        } else {
            alert('at least one field filled out!');
        }
    }
    
    $(function(){
        $('#myForm').on('submit',function(e){
             e.preventDefault();
            checkFields($(this));
        });
    });