JQuery Validate checkbox group

Developer
Size
2,466 Kb
Views
46,552

How do I make an jquery validate checkbox group?

Combine differently named checkboxes into one group for validation and error reporting. What is a jquery validate checkbox group? How do you make a jquery validate checkbox group? This script and codes were developed by Luna Eye on 16 October 2022, Sunday.

JQuery Validate checkbox group Previews

JQuery Validate checkbox group - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Validate checkbox group</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Subjects</h2> <form class="mgm_form" name="registerform" id="registerform"> <label for="subjects" id="subject_error"></label> <table class="tableBorder"> <tr> <th width="400" valign="top">SUBJECT</th> <th width="75" class="question"><p>Teach</p></th> <th width="75" class="question"><p>Research</p></th> </tr> <tr valign="top"> <td class="cat"><p><strong>1 Bible and Related Literature</strong></p></td> <td class="cat"><p><input name="teach_categoryid[]" class="subject-group" type="checkbox" value="1"></p></td> <td class="cat"><p><input name="research_categoryid[]" class="subject-group" type="checkbox" value="1"></p></td> </tr> <tr valign="top"> <td width="400"><p>1.01 Hebrew Bible</p></td> <td><input name="teach_subjectid[]" class="subject-group" type="checkbox" value="2"></td> <td><input name="research_subjectid[]" class="subject-group" type="checkbox" value="2"></td> </tr> <tr valign="top"> <td width="400"><p>1.02 Bible translations</p></td> <td><input name="teach_subjectid[]" class="subject-group" type="checkbox" value="3"></td> <td><input name="research_subjectid[]" class="subject-group" type="checkbox" value="3"></td> </tr> <tr valign="top"> <td width="400"><p>1.03 Bible versions</p></td> <td><input name="teach_subjectid[]" class="subject-group" type="checkbox" value="4"></td> <td><input name="research_subjectid[]" class="subject-group" type="checkbox" value="4"></td> </tr> </table> <input class="button mgm-register-button" type="submit" name="wp-submit" id="wp-submit" value="Apply" />
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js'></script>
<script src='https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Validate checkbox group - Script Codes CSS Codes

body {	padding: 1em;
}
.error { color: red;
}
form { padding: 0.5em;
}
.button { margin: 2em 0;
}

JQuery Validate checkbox group - Script Codes JS Codes

$( "#registerform" ).validate({ debug: true, rules: { "teach_subjectid[]": {	require_from_group: [1, ".subject-group"]	},	"research_subjectid[]": {	require_from_group: [1, ".subject-group"]	} }, // end rules	groups: { 'subject-group': "teach_subjectid[] research_subjectid[]"	},	messages: {	'subject-group': {	required: 'Choose at least one subject'	}, "research_subjectid[]": {	required: 'Choose at least one subject'	}	},	// end messages errorPlacement: function(error, element) { if(element.attr("name") == "teach_subjectid[]" || element.attr("name") == "research_subjectid[]") {	error.insertAfter("#subject_error"); } else { error.insertAfter(element); }	} // end error placement }); // end validate
JQuery Validate checkbox group - Script Codes
JQuery Validate checkbox group - Script Codes
Home Page Home
Developer Luna Eye
Username lunaman
Uploaded October 16, 2022
Rating 3
Size 2,466 Kb
Views 46,552
Do you need developer help for JQuery Validate checkbox group?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Luna Eye (lunaman) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!