使用jquery进行多个按钮操作

时间:2012-08-13 09:35:43

标签: jquery

我必须在一个servlet中添加4个函数,如添加,删除,更新,搜索。我正在使用jquery来验证我的表单。那么,我怎样才能在jquery中放置单独的按钮动作。我在下面添加了验证脚本。任何人都可以帮我做这个......

$(document).ready(function() { 
    $("#departmentId").keypress(function (e)  
    { 
        //if the letter is not digit then display error and don't type anything
        if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
        {
            //display error message
            $("#errmsg").html("Digits Only").show().fadeOut("slow"); 
            return false;
        }   
    });


    $('.btn-delete').click(function(e){

        // Declare the function variables:
        // Parent form, form URL, email regex and the error HTML
        var $formId = $(this).parents('form');
        var formAction = $formId.attr('action');

        var $error = $('<span class="error"></span>');

        // Prepare the form for validation - remove previous errors
        $('li',$formId).removeClass('error');

        $('span.error').remove();

        // Validate all inputs with the class "required"
        $('.required',$formId).each(function(){
            var inputVal = $("#departmentId").val();
            var $parentTag = $("#departmentId").parent();
            if(inputVal == ''){
                $parentTag.addClass('error').append($error.clone().text('Required Field'));
            }






            // Run the email validation using the regex for those input items also having class "email"


            // Check passwords match for inputs with class "password"


        });

        // All validation complete - Check if any errors exist
        // If has errors



        if ($('span.error').length > 0) {

            $('span.error').each(function(){

                // Set the distance for the error animation
                var distance = 5;

                // Get the error dimensions
                var width = $(this).outerWidth();

                // Calculate starting position
                var start = width + distance;

                // Set the initial CSS
                $(this).show().css({
                    display: 'block',
                    opacity: 0,
                    right: -start+'px'
                })
                // Animate the error message
                .animate({
                    right: -width+'px',
                    opacity: 1
                }, 'slow');

            });
        } else {
            $formId.submit();
        }
        // Prevent form submission
        e.preventDefault();


    });

    // Fade out error message when input field gains focus
    $('.required').focus(function(){
        var $parent = $(this).parent();
        $parent.removeClass('error');
        $('span.error',$parent).fadeOut();
    });

    $('.btn-submit').click(function(e){

        // Declare the function variables:
        // Parent form, form URL, email regex and the error HTML
        var $formId = $(this).parents('form');
        var formAction = $formId.attr('action');
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var $error = $('<span class="error"></span>');

        // Prepare the form for validation - remove previous errors
        $('li',$formId).removeClass('error');

        $('span.error').remove();

        // Validate all inputs with the class "required"
        $('.required',$formId).each(function(){
            var inputVal = $(this).val();
            var $parentTag = $(this).parent();
            if(inputVal == ''){
                $parentTag.addClass('error').append($error.clone().text('Required Field'));
            }






            // Run the email validation using the regex for those input items also having class "email"


            // Check passwords match for inputs with class "password"


        });

        // All validation complete - Check if any errors exist
        // If has errors



        if ($('span.error').length > 0) {

            $('span.error').each(function(){

                // Set the distance for the error animation
                var distance = 5;

                // Get the error dimensions
                var width = $(this).outerWidth();

                // Calculate starting position
                var start = width + distance;

                // Set the initial CSS
                $(this).show().css({
                    display: 'block',
                    opacity: 0,
                    right: -start+'px'
                })
                // Animate the error message
                .animate({
                    right: -width+'px',
                    opacity: 1
                }, 'slow');

            });
        } else {
            $formId.submit();
        }
        // Prevent form submission
        e.preventDefault();


    });

    // Fade out error message when input field gains focus
    $('.required').focus(function(){
        var $parent = $(this).parent();
        $parent.removeClass('error');
        $('span.error',$parent).fadeOut();
    });



});

1 个答案:

答案 0 :(得分:0)

请参阅以下链接以清除所有与概念相关的提交按钮..

link

希望你能得到解决方案。