Creating html dropdown menu with labels

        function to create menue in controller:

        ViewBag.Menu = CreateMenu();
        public string CreateMenu()
        {
            List<string> Heading = new List<string>();
            Heading.Add("Heading1");
            Heading.Add("Heading2");
            Heading.Add("Heading3");

            string sourceList = "";
            if (Heading != null)
            {
                foreach (string h in Heading)
                {
                    sourceList = sourceList + " <optgroup label= ' " + h + " ' id= '" + h + "'>";
                    if (h == "Heading1")
                    {
                        sourceList = sourceList + "<option value='label11'>" + "label11" + "</option>";
                        sourceList = sourceList + "<option value='label12'>" + "label12" + "</option>";
                        sourceList = sourceList + "<option value='label13'>" + "label13" + "</option>";
                        sourceList = sourceList + "</optgroup>";
                    }
                    else if (h == "Heading2")
                    {
                        sourceList = sourceList + "<option value='label21'>" + "label21" + "</option>";
                        sourceList = sourceList + "<option value='label22'>" + "label22" + "</option>";
                        sourceList = sourceList + "<option value='label23'>" + "label23" + "</option>";
                        sourceList = sourceList + "</optgroup>";
                    }
                    if (h == "Heading3")
                    {
                        sourceList = sourceList + "<option value='label31'>" + "label31" + "</option>";
                        sourceList = sourceList + "<option value='label32'>" + "label32" + "</option>";
                        sourceList = sourceList + "<option value='label33'>" + "label33" + "</option>";
                        sourceList = sourceList + "</optgroup>";
                    }
                }
            }

            return sourceList;
        }

        Code to be write in View page :

<script type="text/javascript">
    $(document).ready(function () {
        if ("@Html.Raw(ViewBag.Menu)" != "") {
            $('#Menu').empty();
            var select = $('#Menu');
            /* select.append('<option value="0" > Select State </option>');*/
            select.append("@Html.Raw(ViewBag.Menu)");
        }
    });
</script>
add this row to dispaly the dropdown menu
<tr>
    <td>
        <label>
            Menu Name
        </label>
    </td>
    <td>
        <select id="Menu" name="Menu">
            <option value="0">--- Select ---</option>
        </select>
    </td>
</tr>

javascript for Client side Validation

$(document).ready(function () {
    $('#btnName').click(function () {
        $("#formName").validate({
            errorLabelContainer: $("ul", $('div.error-container')),
            wrapper: 'li',
            errorClass: "errorfield",
            rules: {
                Name: { required: true, alpha: true },
                Email: { required: true, email: true  },
                PhoneNumber: { required: true, maxlength: 10 },
                Password: { required: true, minlength: 6 },
                ConfirmPassword: { required: true, equalTo: "#Password"  }
            },
            messages: {
                Name: { required: "Please enter Name", alpha: "Only characters,dot and uderscore allowed" },
                Email: { required: "Error Message", email: "Error Message" },
                PhoneNumber: { required: "Error Message", maxlength: "Error Message" },
                Password: { required: "Error Message", minlength: "Error Message"},
                ConfirmPassword: { required: "Error Message",equalTo: "Error Message" }
            }
        });
    });
});

Default rules available:
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")

We can define our custom rules by adding following function:
jQuery.validator.addMethod("alpha", function (value, element) {
    if (value != null && value != undefined && value != "") {
        return /^[a-zA-Z][a-zA-Z\s\-]+$/.test(value);
    }
    else {
        return true;
    }
}, "");

JavaScript for Validation of Date

<script type="text/javascript">

    function checkdate(input) {

        var validformat = /(?:0[1-9]|1[0-2])\/(?:0[1-9]|[12][0-9]|3[01])\/(?:19|20\d{2})/;  //Basic check for format validity

        var returnval = false

        if (!validformat.test(input.value))

            alert("Please insert a valid date")

        else { //Detailed check for valid date ranges

            var monthfield = input.value.split("/")[0]

            var dayfield = input.value.split("/")[1]

            var yearfield = input.value.split("/")[2]

            var dayobj = new Date(yearfield, monthfield - 1, dayfield)

           

            if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield))

                alert("Invalid Date Please correct and submit again.")

            else

                returnval = true

        }

        if (returnval == false) input.select()

        return returnval

    }

</script>

Masking of Text Box

• Script: You can download the script from here.

• Calling Function: 

·         $("input.phone").mask("(999)999-9999", { placeholder: "#" });

ToolTip implementation

• Script:You can download the script from here.

• Calling Function: 

<script type="text/javascript">
$(document).ready(function() {
$('#id').qtip({
        content: 'New Request Alt+N',
        position: {
            corner: {
                target: 'topRight',
                tooltip: 'bottomLeft'
            }
        },
        show: 'mouseover',
        hide: 'mouseout',
        style: {
            background: '#A2D959',
            color: 'black',
            textAlign: 'center',
            border: {
                radius: 4,
                color: '#A2D959'
            },
            tip: 'bottomLeft'
        }
    });
});
</script>