Radio buttons - validation

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<!-- validation form -->
<form id="validationForm" action="" method="post">
        <div class="group-fields clearfix">
            <div class="odd">
                <!-- input with label -->
                <label>First name*</label>
                <input class="group" type="text" id="firstName"></input>
            </div>
            <div class="even">
                <!-- input with label -->
                <label>Last name*</label>
                <input class="group" type="text" id="lastName"></input>
            </div>
        </div>
        <div class="group-fields clearfix">
            <div class="odd">
                <!-- input with label -->
                <label>Email*</label>
                <input class="group" type="text" id="email"></input>
            </div>
            <div class="even">
                <!-- input with label -->
                <label>Mobile phone</label>
                <input class="group" type="text" id="phone"></input>
            </div>
        </div>
        <div class="group-fields clearfix">
            <div class="odd">
                <!-- input with label -->
                <label>Create password*</label>
                <input class="group" type="password" id="createPassword"></input>
            </div>
            <div class="even">
                <!-- input with label...

CSS

.group-fields {
            margin-bottom:20px;
        }
        .group-fields .odd {
            float:left;
            width:262px;
        }
        .group-fields .even{
            float:left;
            margin-left:20px;
        }
        .group-fields label {
            display: block;
            line-height: 20px;
            font-family: 'Open Sans',Arial,sans-serif;
            font-size: 13px;
        }
        .group-fields .ui-igedit-container {
            box-sizing: content-box;
        }
        .group-fields input.group {
            width:258px;
            height:32px;
        }
        .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {
            width:260px;
            height:34px;
        }
        .group-fields .ui-igpopover {
            width:260px;
        }
        .group-fields input.group {
            border-style: solid;
            border-width: 1px;
            border-color:#bcbcbc;
        }
        .group-fields input.group:hover {
            border-color:#444;
        }
        .group-fields .ui-widget.ui-ignotify.ui-ignotify-inline {
            margin-bottom:0;
        }
        .group-fields input.group.ui-ignotify-error {
            border-color:#f33;
        }
        #igCheckboxAccept, #igCheckboxSubscribe {
            float:left;
            margin-right: 5px;
        }
        .group-fields .inline {
            display:inline;
        }
        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
        @media screen and (max-width:610px) {
            .group-fields .odd {
                float:left;
                width:202px;
            }
            .group-fields input.group {
                width:200px;
            }
            .group-fields .ui-igedit-container,.group-fields .ui-igcombo-wrapper {
                width:202px;
            }
            .group-fields .ui-igpopover {
                width:202px;
            }
     ...

JavaScript

$(function () {
            var data = [
                { ID: "ID101", Name: "Business", Code: 101 },
                { ID: "ID102", Name: "Cooking", Code: 102 },
                { ID: "ID103", Name: "Fashion", Code: 103 },
                { ID: "ID104", Name: "Lifestyle", Code: 104 },
                { ID: "ID105", Name: "Photography", Code: 105 },
                { ID: "ID106", Name: "Sports", Code: 106 }];

						//combo gender
            $('#gender').igTextEditor({
                inputName: "gender",
                listItems: ["Male", "Female"],
                isLimitedToListValues: true
            });

						//input phone
            $("#phone").igMaskEditor({
                inputMask: "(\\0\\01) 000-0000"
            });

						//combo interests						
            $('#igComboInterests').igCombo({
                inputName: "products",
                dataSource: data,
                allowCustomValue: true,
                textKey: 'Name',
                valueKey: "ID",
                multiSelection: {
                    enabled: true
                }
            });

						//rating
            $("#rating").igRating({
                precision: "half",
                valueAsPercent: false
            });
	
  					//date picker
            $("#dateOfBirth").igDatePicker({
                datepickerOptions: { minDate: new Date(1920, 0, 1), maxDate: new Date(2015, 0, 1) }
            });

						//checkboxes
						$("#igCheckboxAccept").igCheckboxEditor();
            $("#igCheckboxSubscribe").igCheckboxEditor();

            $('#validationForm').igValidator({
                onsubmit: true,
                successMessage: "Valid",
                fields: [{
                    required: true,
                    selector: "#firstName",
                    valueRange: [2],
                    onblur: true,
                    custom: function (value, fieldOptions) {
                        var myRegEx = /^[a-zA-Z]+$/;
                        var...