JSFiddle - React, Tailwind, and code Playground

by dhoerster

HTML

<form name='policyIQTrial' id='policyIQTrial' method='POST' onSubmit='return validate()'>
    <label for='Name'>Name:</label><input type='text' id='Name' /><br/>
    <label for='Age'>Age:</label><input type='text' id='Age' /><br/>
    <label for='Usage'>Usage:</label>
        <select id='Usage'>
            <option value='empty'>--Make a Selection--</option>
            <option value='Something'>something</option>
            <option value='else'>else</option>
        </select><br/>
    <input type='submit' id='btnSubmit' value='OK' />
</form>

CSS

.hidVal { display: hidden;}
.showVal {display: inline;}

JavaScript

function validate() {
    var theForm = document.getElementById('policyIQTrial');
    if(theForm){
        var nameField = document.getElementById('Name'),
            ageField = document.getElementById('Age'),
            usageField = document.getElementById('Usage');
        if(nameField.value===""){
            alert('Name is empty.  Form not submitted');
            return false;
        }
        if(ageField.value===""){
            alert('Age is empty.  Form not submitted');
            return false;
        }
        if(usageField.selectedIndex===0){
            alert('You must select a Usage.  Form not submitted');
            return false;
        }
        //validation succeeded, now submit the form
        alert('Form is submitting....');                    
    }
    //you'd want to return true to actually have the form submit...
    return false;                
}