JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<form method='post' class='reg-form'>
<div class='form-row'>
<label for='form_fname'>First Name: </label>
<input type='text' id='form_fname' name='first_name'>
</div>
<div class='form-row'>
<label for='form_sname'>Second Name: </label>
<input type='text' id='form_sname' name='second_name'>
</div>
<div class='form-row'>
<label for='form_email'>Email: </label>
<input type='email' id='form_email' name='email'>
</div>
<div class='form-row'>
<label for='form_phone'>Phone: </label>
<input type='text' id='form_phone' name='phone'>
</div>
<div class='form-row'>
<label for='form_about'>About myself: </label>
<textarea id='form_about' name='about'></textarea>
</div>
<div class="form-row">
<input type="submit" value='Go'>
</div>
</form>
</body>
CSS
.form-row {
margin-bottom: 8px;
overflow: hidden;
}
.form-row input {
float: right;
height: 19px;
line-height: 19px;
margin: 0px;
padding: 0px 5px;
width: 287px;
border: 1px solid #ABADB3;
}
.reg-form {
width: 416px;
margin: 0 auto;
}
.form-row textarea {
height: 90px;
line-height: 16px;
font-size: 12px;
padding: 0px 5px;
width: 404px;
border: 1px solid #ABADB3;
}
.form-row input[type=submit] {
padding:5px;
height:25px;
width:100%;
line-height: 10px;
background: #337AB7;
color:white;
}
.form-row input[type=submit]:hover {
background:#286090;
}
* {
font-family:arial;
font-size:10pt;
}
JavaScript
$(document).ready(function(){
$("input[type='submit']").click(function(){
// find all fields, except "[type='submit']"
var fields = $(this).parents("form").find("input, textarea").not("[type='submit']");
var validated = true;
for(var i = 0; i < fields.length; i++) {
validated = validated && (fields[i].value !== '');
}
if (!validated) {
alert('Fill the fields');
}
return validated;
});
});