JSFiddle - React, Tailwind, and code Playground

by cannap

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://parsleyjs.org/dist/parsley.min.js"></script>
<form id="form">
	<!--CONTACT INFOS-->
	<fieldset>
		<legend>Contact</legend>
		<label for="name">Your Name</label>
		<input id="name" type="text" name="name" data-parsley-required data-parsley-group="block-contact" />

		<label for="email">Your Email</label>
		<input id="email" type="text" name="email" data-parsley-required data-parsley-group="block-contact" />
	</fieldset>

	<!--QUESTION: COMPANY?-->

	<label for="company">Do you have a company?</label>
	<input id="comp_yes" type="radio" name="company" value="1" checked="checked">Yes!
	&nbsp;&nbsp;
	<input id="comp_no" type="radio" name="company" value="0">No...<br><br>

	<!--COMPANY INFOS-->
	<div id="comp_panel">
		<fieldset>
			<legend>Company</legend>
			<label for="company_name">Company Name</label>
			<input id="company_name" type="text" name="company_name" data-parsley-required data-parsley-group="block-comp" />
			<label for="company_phone">Company phone</label>
			<input id="company_phone" type="text" name="company_phone" data-parsley-required data-parsley-group="block-comp" />
		</fieldset>
	</div>

	<button type="submit">Submit</button>
</form>

CSS

body {
    padding: 20px;
}

fieldset {
    margin-bottom:30px;
}

label {
    margin-top: 5px;
    display: block;
}

input.parsley-error {
    border: 1px solid red;
}

.parsley-error-list {
    color: red;
}

button {
    display: block;
    margin-top: 20px;
}

JavaScript

// on change "is company", hide / show fields and change disabled
		$("input[name=company]").on('click', function() {
			var companyPanel = $('#comp_panel');

			// if is company
			if ($(this).val() == 1) {
				// show panel
				companyPanel.show();

				// remove disabled prop
				companyPanel.find('input,select,radio').prop('disabled', false);
			} else {
				// if is not company, hide the panel and add disabled prop
				companyPanel.hide();
				companyPanel.find('input,select,radio').prop('disabled', true);
			}
		});

		// bind parsley to the form. Exclude all disabled fields
		$('#form').parsley({
			excluded: 'input[type=button], input[type=submit], input[type=reset], input[type=hidden], :disabled'
		});

		// on form submission
		$('#form').submit(function(e) {
			// validate form
			$('#form').parsley().validate();

			// if is valid submit form
			if ($("#form").parsley().isValid()) {
				return true;
			}
			e.preventDefault();
		});