JSFiddle - React, Tailwind, and code Playground

JavaScript

$(document).ready(function(){


		$('#registration-form').validate({
	    rules: {
		
	     firstname: {
		   names: true,
	       minlength: 4,
		   maxlength:20,
	       required: true
	      },
		  
		 lastname: {
			names: true,
	        minlength: 4,
			maxlength:20,
	        required: true
	      },
		  
		 studentid: {
			digits: true,
	        minlength: 5,
			maxlength:20,
	        required: false
	      },
		  
		 username: {
	        minlength: 5,
			maxlength:20,
	        required: true
	      },
		  
		 password: {
			required: true,
			minlength: 6,
			maxlength:20,
		  },
			
		password2: {
			minlength: 6,
			maxlength:20,
			equalTo: "#password",
			required: true
			},
		  
	      email: {
	        required: true,
	        email: true
	      },
		  
		  agree: "required"
		  
	    },
			highlight: function(element) {
				$(element).closest('.control-group').removeClass('success').addClass('error');
			},
			success: function(element) {
				element
				.text('OK!').addClass('valid')
				.closest('.control-group').removeClass('error').addClass('success');
			}
	  });

}); // end document.ready