Throw error messages using Jquery

Question

I have a form that has two textfields, one password field, one email field, three radio buttons, and three check boxes. What I'm trying to accomplish is that if someone doesn't enter the a specific amount into the textfields, or doesn't give enough characters for the password, or fails to select a radio button, a little error will pop up next to it saying something like "This field must have two of more characters".

HTML:

Text Field: <input type="text" name="fName" id="textField" /></br></br>
Number Field: <input type="text" name="lName" id="numField" /></br></br>
Email: <input type="email" name="email" id="email" /></br></br>
Password: <input type="password" name="pWord" id="passWord" /></br></br>

<input type="radio" name="click" value="radio1" id="rad1"> Radio 1</br>
<input type="radio" name="click" value="radio2" id="rad2"> Radio 2</br>
<input type="radio" name="click" value="radio3" id="rad3"> Radio 3</br>
</br>
<input type="checkbox" name="vehicle" value="bike" id="bike">Bike</br>
<input type="checkbox" name="vehicle" value="motorcycle" id="mCycle">Motorcycle</br>
<input type="checkbox" name="vehicle" value="car" id="car">Car/Pickup</br>
<input type="checkbox" name="vehicle" value="public" id="public">Public (Bus/Train)

I have no working script for this yet because I haven't been able to figure it out, but what I've attempted would be something like:

    if($('#textField').length < 2) {
$( "#textField" ).after('<span id="txt1">Must be atleast 2 characters</span>');
    }

The errors should throw next to the fields, so:

• text field = must be 2 characters.
• number field = must be 2 characters.
• email = must be email.
• password = must be 5 characters.
• three radio button - must select one button
• three checkboxes - must select one checkbox

Answer 1

You can do something is like this. The error is in the line $('#textField').length in your code. It should be $('#textField').val().length. You are missing .val().

$("input").on("blur", function () {
 $(".error").remove(); //remove all error span elements

 if ($('#textField').val().trim().length < 2) {
  $("#textField").after('<span class="error">  Must be atleast 2 characters</span>');
  $('#textField').focus();
  return false;
 }
 if ($('#numField').val().trim().length < 2) {
  $("#numField").after('<span class="error">  Must be atleast 2 characters</span>');
  $("#numField").focus();
  return false;
 }
 if (!isEmail($("#email").val().trim())){
  $("#email").after('<span class="error">  Must be email</span>');
  $("#email").focus();
  return false;
 }
 if ($('#passWord').val().trim().length !== 5) {
  $("#passWord").after('<span class="error">  Must be 5 characters</span>');
  $("#passWord").focus();
  return false;
 }
 if ($('input[name="click"]:checked').val() == undefined) {
  $("#rad3").next().after('<span class="error">  Must select one button</span>');
  return false;
 }
 if ($('input[name="vehicle"]:checked').val() == undefined) {
  $("#public").next().after('<span class="error">  Must select one button</span>');
  return false;
 }
});

function isEmail(email) {
 var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
 return regex.test(email);
}

.error {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Text Field: <input type="text" name="fName" id="textField" /></br>
</br>
Number Field: <input type="text" name="lName" id="numField" /></br>
</br>
Email: <input type="email" name="email" id="email" /></br>
</br>
Password: <input type="password" name="pWord" id="passWord" /></br>
</br>

<input type="radio" name="click" value="radio1" id="rad1"> Radio 1</br>
<input type="radio" name="click" value="radio2" id="rad2"> Radio 2</br>
<input type="radio" name="click" value="radio3" id="rad3"> Radio 3</br>
</br>
<input type="checkbox" name="vehicle" value="bike" id="bike">Bike</br>
<input type="checkbox" name="vehicle" value="motorcycle" id="mCycle">Motorcycle</br>
<input type="checkbox" name="vehicle" value="car" id="car">Car/Pickup</br>
<input type="checkbox" name="vehicle" value="public" id="public">Public (Bus/Train)

Answer 2

You can use required and minlength attributes, at change event of <input type="checkbox"> element remove required attribute of sibling <input tyep="checkbox"> elements see Required attribute on multiple checkboxes with the same name?. Note, HTML <br> tag is self-closing or use forward slash before > <br/>

document.forms[0].querySelectorAll("[name=vehicle]")
.forEach((checkbox, index) => {
  checkbox.onchange = () => {
    let selector = "[name=vehicle]:not(:nth-child("+ index + 1 +"))";
    document.forms[0].querySelectorAll(selector).forEach(not => {
      not.removeAttribute("required")
    })
  }
})

<form>
  Text Field: <input type="text" name="fName" id="textField" minlength="2" required /><br><br> Number Field: <input type="text" name="lName" id="numField" minlength="2" required /><br><br> Email: <input type="email" name="email" id="email" /><br><br>  Password: <input type="password" name="pWord" id="passWord" minlength="5" required/><br><br>
  <input type="radio" name="click" value="radio1" id="rad1" required> Radio 1<br>
  <input type="radio" name="click" value="radio2" id="rad2" required> Radio 2<br>
  <input type="radio" name="click" value="radio3" id="rad3" required> Radio 3<br>
  <br>
  <input type="checkbox" name="vehicle" value="bike" id="bike" required>Bike<br>
  <input type="checkbox" name="vehicle" value="motorcycle" id="mCycle" required>Motorcycle<br>
  <input type="checkbox" name="vehicle" value="car" id="car" required>Car/Pickup<br>
  <input type="checkbox" name="vehicle" value="public" id="public" required>Public (Bus/Train)<br>
  <input type="submit">
</form>