JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://coffeeonmars.com/W150/assignments/asst_09/js/jquery-2.0.3.min.js"></script>
<form id="userInfo-form" action="success.html">
<p>
<label>First Name:
<input type="text" id="first-name" name="first-name">
</label>
<span id="error-first-name" class="hidden error">* Must be at least 6 characters
</p>
<p>
<label>Last Name:
<input type="text" id="last-name" name="last-name">
</label>
<span id="error-last-name" class="hidden error">* Must be at least 6 characters
</p>
<p>
<label>Age:
<input type="number" id="age" name="age">
</label>
<span id="error-age" class="hidden error">* Not a number >=0
</p>
<button type="submit" name="submit">Continue</button>
</form>
CSS
.error{
color:red;
}
.hidden {
display:none;
}
JavaScript
$(document).ready(function(){
$("#userInfo-form").submit(validateForm);
});
function validateForm()
{
$(".error").hide();
var validFirstName =
validateTextField("#first-name","#error-first-name");
var validLastName =
validateTextField("#last-name","#error-last-name");
var validAge =
validateTextField("#age","#error-age");
return validFirstName && validLastName && validAge;
}
function validateTextField(fieldId, errorId)
{
if($(fieldId).val() == "")
{
$(errorId).show();
return false;
}
}