jQuery Validation

Plugin Demo

by Eugene Manager

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/css/screen.css">
<form class="cmxform" id="form1" method="get" action="">
  <fieldset>
    <legend>Validating a form with a radio and checkbox buttons</legend>
    <fieldset>
      <legend>Gender</legend>
      <label for="gender_male">
        <input type="radio" id="gender_male" value="m" name="gender" required>Male
      </label>
      <label for="gender_female">
        <input type="radio" id="gender_female" value="f" name="gender">Female
      </label>
      <label for="gender" class="error">Please select your gender</label>
    </fieldset>
    <fieldset>
      <legend>Family</legend>
      <label for="family_single">
        <input type="radio" id="family_single" value="s" name="family" required>Single
      </label>
      <label for="family_married">
        <input type="radio" id="family_married" value="m" name="family">Married
      </label>
      <label for="family_other">
        <input type="radio" id="family_other" value="o" name="family">Other
      </label>
      <label for="family" class="error">Please select your family status.</label>
    </fieldset>
    <p>
      <label for="agree">Please agree to our policy</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree" required>
      <br>
      <label for="agree" class="error block">Please agree to our policy!</label>
    </p>
    <fieldset>
      <legend>Spam</legend>
      <label for="spam_email">
        <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2">Spam via E-Mail
      </label>
      <label for="spam_phone">
        <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]">Spam via Phone
      </label>
      <label for="spam_mail">
        <input type="checkbox" class="checkbox" id="spam_mail" value="mail"...

CSS

.block {
		display: block;
	}
	form.cmxform label.error {
		display: none;
	}

JavaScript

$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
	});

	$(document).ready(function() {
		$("#form1").validate();
		$("#selecttest").validate();
	});