jQuery Form Plugin Example (Deprecated)

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

Notices:

If ajaxForm() or ajaxSubmit() not working:
Check if include jQuery twice
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>

<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>

</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;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

$(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;

}

M	T	W	T	F	S	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

jQuery Form Plugin Example (Deprecated)

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

Notices:

Form HTML:

Javascript: