Pretty self-explanatory, I have a textarea and it's set to required, but it only prompts user if you actually click in the text area, if you submit without clicking inside the text area it will not prompt the alert.

Fiddle

<p class="textHeader">
    <strong>
        Which type of elements would you be in favor of for a future 
        pattern for interactive media to follow? 
    </strong>
    <textarea
        name="styled-textarea"
        id="styled" 
        onfocus="this.value=''; setbg('#e5fff3');" 
        oninvalid="invalidComment(this);" 
        onblur="setbg('white')" 
        placeholder="Max characters 140"
        maxlength="140" 
        required
    > 
    </textarea>
</p> 

Pretty self-explanatory, I have a textarea and it's set to required, but it only prompts user if you actually click in the text area, if you submit without clicking inside the text area it will not prompt the alert.

Fiddle

<p class="textHeader">
    <strong>
        Which type of elements would you be in favor of for a future 
        pattern for interactive media to follow? 
    </strong>
    <textarea
        name="styled-textarea"
        id="styled" 
        onfocus="this.value=''; setbg('#e5fff3');" 
        oninvalid="invalidComment(this);" 
        onblur="setbg('white')" 
        placeholder="Max characters 140"
        maxlength="140" 
        required
    > 
    </textarea>
</p> 

• javascript
• jquery
• html

• 1 If you're using jQuery why don't you attach the event handler to the form element submit? – Mike Commented Mar 15, 2014 at 20:38
• i'm pretty new to jquery, i am good with programming syntax but not as much event type stuff, do i change my function to have the event argument? i think i may have tried that before and it didn't like it. – user3380292 Commented Mar 15, 2014 at 20:40
• You have another problem as well. You are only doing one check, and if it fails, it shows the error, but doesn't continue doing any of the other checks. So if you leave everything blank, it will only tell you to enter your name. You should have it show ALL the errors, not just one at a time. – Mike Commented Mar 15, 2014 at 20:45
• Yeah that's partly true, if you fill out first name and not last name it will give you a prompt for that (same for email), i could have them all at once though. – user3380292 Commented Mar 15, 2014 at 20:46

2 Answers 2

Easy answer. You are already providing contents for textarea, some white space with how your existing HTML is laid out. Therefore a value has been provided. Make sure your textarea closing tag is right next to the opening tag, without any spaces, so there is no white space content in-between. Like this:

<p class="textHeader">
<strong>
    Which type of elements would you be in favor of for a future 
    pattern for interactive media to follow? 
</strong>
<textarea
    name="styled-textarea"
    id="styled" 
    onfocus="this.value=''; setbg('#e5fff3');" 
    oninvalid="invalidComment(this);" 
    onblur="setbg('white')" 
    placeholder="Max characters 140"
    maxlength="140" 
    required
></textarea>

You can use a js library like abide http://www.siegeengine/documentation/abide-html5-validation.html

Or if you prefere

<script type="text/javascript">
    // without jQuery style
    var bindEvents = function(event){
        if( document.getElementById('styled').value.trim() === '' ){
            event.preventDefault();
            alert("Write something please");
        }
    };

    window.onload = function(){
        document.forms[0].addEventListener('submit', bindEvents, true);
    };

    // jQuery style
    var bindEvents = function(){
        $('form').on('submit', function(e){
            if( $(this).val().trim() === '' ){
                e.preventDefault();
                alert("Write something please");
            }
        });
    };
    $(document).ready( bindEvents );

    // i would not remend this but it will work also
    var initForm = function(){
        document.getElementById('styled').focus();
        document.getElementById('styled').blur();
    }

    window.onload = initForm;
</script>