Created
April 10, 2011 19:16
-
-
Save haacked/912630 to your computer and use it in GitHub Desktop.
jquery validation with radio buttons.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Index</title> | |
| <style type="text/css"> | |
| input.error | |
| { | |
| border: solid 1px red; | |
| color: Red; | |
| } | |
| </style> | |
| <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.js" type="text/javascript"></script> | |
| <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| $(function () { | |
| $("#form").validate({ | |
| rules: { | |
| accountType: "required" | |
| }, | |
| messages: { | |
| accountType: "You must select an account type" | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div> | |
| <form id="form" method="post" action="/"> | |
| <label>Select an Account Type</label> | |
| <p> | |
| <input type="radio" name="accountType" value="1" id="accountType_C" /><label for="accountType_C" >Coder</label> | |
| </p> | |
| <p> | |
| <input type="radio" name="accountType" value="0" id="accountType_S" /><label for="accountType_S">Surreptitious Ninja</label> | |
| </p> | |
| <input type="submit" /> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
<label> 06: What is the target market of your product? </label> </div> <div class="col-sm-4 col-sm-offset-2 radio-labels"> <input type="radio" name="targ_mkt" value="Automative" /><label>Automative, aviation, marine</label> </br> <input type="radio" name="targ_mkt" value="Defence, security, safety" /><label>Defence, security, safety</label></br> <input type="radio" name="targ_mkt" value="Environment, water management" /><label>Environment, water management</label> </br> <input type="radio" name="targ_mkt" value="Food, livestock, agribusiness" /><label>Food, livestock, agribusiness</label> </br> <input type="radio" name="targ_mkt" value="Infrastructure, housing and trasport" /><label>Infrastructure, housing and trasport</label> </br> <input type="radio" name="targ_mkt" value="Oil, gas, energy" /><label>Oil, gas, energy</label> </br> <input type="radio" name="targ_mkt" value="Others"/><label>Others ( Specify)</label> </br> </div>Here is the style for error ..
.error { color: red; font-family:verdana, Helvetica; font-size: 10px; }And the Script for validation
<script type="text/javascript"> // Wait for the DOM to be ready $(function() { // Initialize form validation on the registration form. // It has the name attribute "registration" $("form[name='post_fyp']").validate({ // Specify validation rules errorPlacement: function errorPlacement(error, element) { element.after(error); }, rules: { // The key name on the left side is the name attribute // of an input field. Validation rules are defined // on the right side fyp_title: "required", fyp_demo: "required", fyp_poster : { required: true, accept: 'docx|doc' }, core_tech: "required", targ_mkt : "required", exc_sumry: { required : true, minlength : 100 }, prob_solv: { required : true, minlength : 100 }, my_solution: { required : true, minlength : 100 }, end_goal: { required : true, minlength : 100 }, est_budget: { required: true, number: true }, email: { required: true, // Specify that email should be validated // by the built-in "email" rule email: true }, supervisor_name : "required", suprvisor_email : { required : true, email : true } }, // Specify validation error messages messages: { fyp_title: "<span class='error-report'>Please enter your Project Title</span>", fyp_demo: "<span class='error-report'>Please enter your FYP Demo</span> ", fyp_poster: "<span class='error-report'>Please Upload the File</span> ", core_tech: "<span class='error-report'>Select One of the Core Tech !</span> ", targ_mkt: "<span class='error-report'>Select Your Target Market !</span> ", exc_sumry: { required: "<span class='error-report'>Please Enter Details about your FYP Summery</span> ", minlength: "<span class='error-report'>Your FYP summery must be at least 100 characters long</span> " }, prob_solv: { required: "<span class='error-report'>Please Enter Details about Problem Solution</span> ", minlength: "<span class='error-report'>Problem Solution must be at least 100 characters long</span> " }, my_solution: { required: "<span class='error-report'>Please Enter Your Solution about the Problem !!</span>", minlength: "<span class='error-report'>Your FYP summery must be at least 100 characters long</span> " }, end_goal: { required: "<span class='error-report'>What will be the End product?</span> ", minlength: "<span class='error-report'>Details about the End product must be 100 characters long!</span> " }, est_budget: "<span class='error-report'>Enter a Valid Number</span>", email: "<span class='error-report'>Please enter a valid email address</span>", supervisor_name : "<span class='error-report'>Enter Supervisor Name</span> ", suprvisor_email : "<span class='error-report'> Please enter a valid email address!</span>" }, // Make sure the form is submitted to the destination defined // in the "action" attribute of the form when valid submitHandler: function(form) { form.submit(); } }); }); </script>