JSFiddle - React, Tailwind, and code Playground

PCM - Required Fields Check

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="page-content">
    <div class="container">
        <form action="" method="post" class="frmAdd">
            <div class="row">
                <div class="col-md-6">
                    <div class="the-box">
                        <div class="form-group">
                            <label for="ticket_type">Ticket Type</label>
                            <select class="form-control" name="ticket_type" id="ticket_type" required="required">
                                <option value="help_desk" selected>Help Desk</option>
                                <option value="work_request">Work Request</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="the-box bg-default">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="loadTempl">Load Saved Template</label>
                                    <small data-toggle="tooltip" data-placement="top" title="Loads a previously saved Template">
                                        <i class="fa fa-question-circle i-help text-muted"></i>
                                    </small>
                                    <select class="form-control" name="loadTempl" id="loadTempl" required="required">
                                        <option value=""></option>
                                        <option value="user authentication">User Authentication</option>
                                        <option...

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700);
body {
    background: none repeat scroll 0 0 #f0f0f0;
    color: #656d78;
    font-family: 'Open Sans',Calibri,Arial,sans-serif;
    font-size: 15px;
    margin-top: 10px;
}

.form-control.hasError {
    border: 1px solid #e9573f !important;
}

JavaScript

$(document).ready(function() {

	// Validate Required Fields
	$("form :input[required='required']").blur(function() {
		if (!$(this).val()) {
			$(this).addClass('hasError');
		} else {
			if ($(this).hasClass('hasError')) {
				$(this).removeClass('hasError');
			}
		}
	});
    
    /** ******************************
	* Activate Tool-tips
	****************************** **/
    $("[data-toggle='tooltip']").tooltip();

});