Home/ Questions/Q 9115193
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:22:21+00:00

I tried this code to validate radio buttons: <html> <head> <script src=jquery-1.8.3.js type=text/javascript> </script>

  • 0

I tried this code to validate radio buttons:

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript">
</script>
<script src="jquery.validate.js" type="text/javascript">
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules:{
username:{
required:true,
alphanumeric:true
}
gender:"required",
},
messages:{
username:
{
required:"username cannot be empty",
alphanumeric:"username needs to be alphanumeric"
}
gender:{
required:"specify this field",
}
}
});
});


</script>
<style type="text/css">


label.error
{
color:red;
padding-left:.5em;
}
</style>

</head>
<body>
<form id="myform" action="r.html">
<table>

<tr>
<td><label for="username">Username<em>*</em>:</td></label><td><input type="text"           id="username" name="username"/></td>
</tr>

<tr>
<td><label for="gender" validate="required:true" class="required">Gender<em>*</em>:      </label></td><td><input type="radio" id="gender" name="gender" value="male"/>Male</td>
</tr>
<tr>
<td></td><td><input type="radio" id="gender" name="gender" value="female"/>Female</td>
</tr>

<tr>
<td></td>
<td><input type="submit" value="submit" id="submit"/></td>
</tr>
</table>
</form>
</body>
</html>

when I tried this code, gender field is being validated but error message is appearing in-between gender and male attributes..but it must appear 0.5em after male attribute.

and alphanumeric validation is not working at all.
please someone help me out.
Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a multitude of errors….

    Just like in your other question, this is not the typical syntax for a rule…

    gender:"required",

    It should be required: true and inside of your rules: {} like this…

    rules: {
    username: {
        required: true,
        alphanumeric: true
    },
    gender: {
        required: true
    }
},

    In your HTML here…

    <label for="gender" validate="required:true" class="required">Gender<em>*</em>:</label>

    validate="required:true" is totally superfluous and should be removed.

    • It’s meaningless as it’s a totally fabricated attribute.
    • It’s applied to the label instead of the input.

    class="required" is not only superfluous since it’s applied to a label and not an input element, it’s totally redundant because you’re already specifying the rule within your .validate() options.

    With the rule defined in your jQuery, the HTML would simply be:

    <label for="gender">Gender<em>*</em>:</label>

    To use the alphanumeric rule, you need to also include the “additional methods” file here:

    http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js

    or minified:

    http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.min.js

    You have invalid HTML here. Note how </label> wraps outside the </td>…

    <td><label for="username">Username<em>*</em>:</td></label>

    Should be:

    <td>
    <label for="username">Username<em>*</em>:</label>
</td>

    As far as placing your errors, I would not have used a table for laying out the form in the first place. Be that as it may, you could place the error messages using the built-in errorPlacement: method. error.insertAfter(element) is the default function.

    Using conditionals to test the type of input will allow you to change this function for the radio buttons. You can tweak the code below to place your messages as desired.

    jQuery .validate() method:

    $("#myform").validate({

    // your rules and options,

    errorPlacement: function (error, element) {
        if (element.is('input[type="text"]')) {
            error.insertAfter(element); // placement of errors on text fields
        } else if (element.is('input[type="radio"]')) {
            element.next('.radio-message').html(error);  // placement of errors on radio buttons
        } else {
            error.insertAfter(element);  // default placement
        }
    }
});

    HTML:

    <input type="radio" id="gender" name="gender" value="male" />Male <span class="radio-message"></span>

    Working Demo:

    http://jsfiddle.net/kP4Xy/

    You were also missing a comma (will break code) and had some extra commas (might break code in IE).

    Again, like I stated before, when you follow proper code indentation and formatting, it’s much easier to see these mistakes. I strongly suggest you take my advice this time. You will become a better programmer, your code will be easier to read, your HTML will be more valid, and your JavaScript will be easier to troubleshoot.

    Plugin Documentation:

    http://docs.jquery.com/Plugins/Validation

    • 0