-
-
Save haacked/912630 to your computer and use it in GitHub Desktop.
| <!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> |
<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>
The issue with this is that if you submit the form without checking either radio button, it correctly shows an error message, but only highlights the first radio button. If you then check the second radio button, the error message goes away, but the first radio button is still highlighted (via the "error" CSS class).