Jquery Validate Plugin

Include ~/Scripts/jquery.validate.js

id="formCreate"

action="/System/Bin" method="post" novalidate="novalidate">
   

           

               

@Resource.Input_Bin

               

@Resource.Input_Description

           

           

               

name="txtBin"

  type="text"  />
               

           
           

               

@Resource.Input_CardNoLength

               

@Resource.Input_Range

           

           

               

               

           

           

               

                   
               

           

Use with ajax calls - Validate within the bounded events

$(document).ready(function myfunction() {
       
        $('#btnSubmit').click(function () {
            $('#formCreate').validate({
                rules: {
                    txtBin: { required: true, number: true },
                    txtDescription: { required: true },
                    txtCardNumberLength: { required: true, number: true },
                    txtRange: { required: true, number: true }
                },
                highlight: function (element) {
                    $(element).closest('div').addClass("f_error");
                    setTimeout(function () {
                    }, 200)
                },
                unhighlight: function (element) {
                    $(element).closest('div').removeClass("f_error");
                    setTimeout(function () {
                    }, 200)
                },
                errorPlacement: function (error, element) {
                    $(element).closest('div').append(error);
                }
            }).form();

            if (!$("#formCreate").valid())
                return;

            var path = "/System/BinCreate";
            $.getJSON(path, {
                bin: $('#txtBin').val(), description: $('#txtDescription').val(),
                cardNoLength: $("#txtCardNumberLength").val(), range: $("#txtRange").val()
            }, function (data) {
                if (data.status == "success") {
                    $('#txtBin').val(""); $('#txtDescription').val("");
                    $("#txtCardNumberLength").val(""); $("#txtRange").val("");
                    indexChanged(1);
                }
            });
        });