jQuery Form Plugin Example (Deprecated)

Official Site: http://malsup.com/jquery/form/

Notices:

  1. If ajaxForm() or ajaxSubmit() not working:
    Check if include jQuery twice
  2. Disable browser validation:
    Add “novalidate” in <form>

Form HTML:

<form id="register_form" name="register_form" action="<?=base_url()?>index.php/api/member/register" method="post"  enctype="multipart/form-data" novalidate>
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

 Javascript:

$(document).ready(function(){
    form_funs.init();

});

var form_funs = {
    get_form: function(){
        return $('#register_form');
    },
    init: function(){
        var wrap = this;
        var $form = wrap.get_form();
        var $select_field = $form.find('.file_field');
        var $select_button = $form.find('.select_button');

        wrap.init_form();

        $select_button.on('click', function(e){
            e.preventDefault();
            $select_field.trigger('click');
        });
    },
    init_form: function(){
        var wrap = this;
        var $form = wrap.get_form();
        var $submit_button = $form.find('.bt_submit');

        $submit_button.on('click', function(e){
            e.preventDefault();
            $form.submit();
        });

        $form.submit(function() { 
            $(this).ajaxSubmit({
                beforeSubmit: function(arr, $form, options) {
                    var result = wrap.validate(arr, $form);
                    return result;
                }, 
                data: {

                }, 
                success: function(data, statusText, xhr, $form) { 
                    if(data.status == 'success'){
                        window.location.href = base_url + 'index.php/competition/upload';
                    }else{
                        alert(data.message);
                    }
                }, 
                error: function(){
                    alert("ERROR");
                }
            }); 
     
            return false; 
        });
    }, 
    validate: function(arr, $form){
        var wrap = this;

        for(var i = 0; i < arr.length; i++){
            var obj = arr[i];
            if(obj.type == 'textarea'){
                var $e = $('#' + obj.name);
                if($e.hasClass('ckeditor') == true){
                    //arr[i].value = get_cke(obj.name);
                }
            }

            if(obj.required == true && (obj.value == null || obj.value == '')){
                var $field = $('input[name="' + obj.name + '"]');
                var label = $field.attr('title');

                if(typeof label == 'undefined' || label == null){
                    alert('Please enter all fields.');
                }else{
                    alert('Please enter ' + label);
                }
                
                $field.focus();
                return false;
            }
        }

        if(wrap.validate_password() == false){
            return false;
        }

        return true;
    }, 
    validate_password: function(){
        var wrap = this;
        var $form = wrap.get_form();
        var $pw1 = $form.find('input[name="passwd"]');
        var $pw2 = $form.find('input[name="confirm_passwd"]');
        var length_limit = 5;

        if($pw1.val().length < length_limit){
            alert('密碼長度至少要5個字元');
            $pw1.focus();
            return false;
        }

        if($pw1.val() != $pw2.val()){
            alert('請確認輸入相同的密碼');
            $pw2.focus();
            return false;
        }

        return true;
    }
}