Jquery Validation plugin SubmitHandler Ajax only works once

Question

hope you are doing well.

So I'm doing a registration form (for admin), using jquery validation plugin and ajax call to process the data insertion. This is my form:

<form id="add_user" class="form-horizontal" action="includes/process_adduser.php" role="form" method="post">
    <div class="form-body">
        <div class="alert alert-danger display-hide">
            <button class="close" data-close="alert"></button>
            You have some form errors. Please check below.
            </div>
        <div class="alert alert-success display-hide">
            <button class="close" data-close="alert"></button>
            Your form validation is successful!
        </div>
        <div class="form-group">
        <label class="col-md-3 control-label" for="musername">Username<span class="required">* </span></label>
        <div class="col-md-3">
            <input type="text" id="musername" name="musername" class="form-control" placeholder="Enter username"> 
        </div> 
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label" for="mpassword">Password<span class="required">                                       * </span></label>
            <div class="col-md-3">
                <input type="password" id="mpassword" name="mpassword" class="form-control" placeholder="Enter password"> 
            </div> 
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label" for="memail">Email <span class="required">* </span></label>
            <div class="col-md-3">
                <input type="email" id="memail" name="memail" class="form-control" placeholder="Enter email"> 
            </div> 
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label" for="mname">Full name<span class="required">* </span></label>
            <div class="col-md-3">
                <input type="text" id="mname" name="mname" class="form-control" placeholder="Enter name"> 
            </div> 
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label" for="mtype">User type<span class="required">* </span></label>
            <div class="col-md-3">
                <select id="mtype" name="mtype" class="form-control">
                    <option value="editor">Editor</option> 
                    <option value="ad-admin">Ad-admin</option> 
                    <option value="administrator">Administrator</option> 
                </select>
            </div> 
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Access <span class="required">* </span>
            </label>
            <div class="col-md-4">
                <div class="checkbox-list" data-error-container="#add_user_access_error">  
                <label>
                    <input type="checkbox" value="AA" class="access" name="access[]"/> AA </label> 
                    <input type="checkbox" value="BA" class="access" name="access[]"/> BA </label> 

                </div> 
                <div id="add_user_access_error"></div>
            </div>
        </div>
    </div>  
    <div class="form-actions">
        <div class="row">
            <div class="col-md-offset-3 col-md-9">
                <button type="submit" class="btn green submit">Submit</button>
                <button type="button" class="btn default">Cancel</button>
            </div>
        </div>
    </div>
    </form>

while my script for the validation:

<script>
jQuery(document).ready(function() {   
$('.submit').click(function(){
console.log("submiiiiit");
var form1 = $('#add_user');
var error1 = $('.alert-danger', form1);
var success1 = $('.alert-success', form1);

$('#add_user').validate({ 
    errorElement: 'span', //default input error message container
    errorClass: 'help-block', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    rules: {
        musername: {
            required: true
        },
        mpassword: {
            required: true
        },
        memail: {
            required: true
        },
        mname: {
            required: true
        },
        usertype: {
            required: false
        },
        'access[]': {
            required: true,
            minlength: 1
        }
    },

    messages: { 
        musername: {
            required:  "Username is required."
        },
        mpassword: {
            required:  "Password is required."
        },
        memail: {
            required:  "Email is required."
        },
        mname: {
            required:  "Name is required."
        },
        'access[]': {
            required: "Access is required.",
            minlength: "Access is required."
        }
    },

    invalidHandler: function(event, validator) { //display error alert on form submit   
        success1.hide(); 
        $('.alert-danger span').text("You have some form errors. Please check below....");      
        $('.alert-danger', $('#add_user')).show();
        Metronic.scrollTo(error1, -200);
    },

    errorPlacement: function (error, element) { // render error placement for each input type
        if (element.parent(".input-group").size() > 0) {
            error.insertAfter(element.parent(".input-group"));
        } else if (element.attr("data-error-container")) { 
            error.appendTo(element.attr("data-error-container"));
        } else if (element.parents('.radio-list').size() > 0) { 
            error.appendTo(element.parents('.radio-list').attr("data-error-container"));
        } else if (element.parents('.radio-inline').size() > 0) { 
            error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
        } else if (element.parents('.checkbox-list').size() > 0) {
            error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
        } else if (element.parents('.checkbox-inline').size() > 0) { 
            error.appendTo(element.parents('.checkbox-inline').attr("data-error-container"));
        } else {
            error.insertAfter(element); // for other inputs, just perform default behavior
        }
    },

    highlight: function(element) { // hightlight error inputs
        $(element)
            .closest('.form-group').addClass('has-error'); // set error class to the control group
    },

    unhighlight: function (element) { // revert the change done by hightlight
        $(element)
            .closest('.form-group').removeClass('has-error'); // set error class to the control group
    },

    success: function (label) {
        label
            .closest('.form-group').removeClass('has-error'); // set success class to the control group
    },

    submitHandler: function (form) {
        //alert("submitting");
        var url = $(form).attr('action') ;
        var data = $(form).serialize()+'&ajax_validation=1'; 
        var accessArray = $('.access:checked').map(function() { return this.value; }).get();
        var musername = $('input[name="musername"]').val();
        var mpassword = $('input[name="mpassword"]').val();
        var memail = $('input[name="memail"]').val();
        var mname = $('input[name="mname"]').val();
        var mtype = $('select[name="mtype"]').val();     
        // form validation success, call ajax form submit
        $.ajax({
          url: url,
          data: {
            access : accessArray,
            musername: musername,
            mpassword:mpassword ,
            memail:memail ,
            mname: mname,
            mtype:mtype
          },
          type: 'POST',
          success: function(result) {   
            if(result==="ok") { 
                $("form#add_user")[0].reset();
                $('input').prop( "checked", false );
                $('.alert-success').text("New user has been added");     
                $('.alert-success', $('#add_user')).show();
            } else {    
                $('.alert-danger').text("error message here");      
                $('.alert-danger', $('#add_user')).show();
            }                   
          }
        }); return false;
    }
});

$('#add_user').keypress(function(e) {
    if (e.which == 13) {  
        if ($('#add_user').validate().form()) { 
          $('#add_user').submit(); //form validation success, call ajax form submit
        }
        return false;
    }
  });
 });    
 });
 </script>

Now, the validations works when user submits for the first time. The error message is displayed correctly. But, when they hit the submit again without refreshing the page, with or without editing the form, it just goes to the includes/process_adduser.php file - even worse, it skips my duplicate username validation.

Did I miss anything in the code? Please kindly advice.

Sorry guys this is a long post and I'm still learning. Thanks for your help.

Answer 1

The only problem I could see is how you are initializing the validation plugin, you should initialize the plugin on dom ready handler not in the submit click handler.

jQuery(document).ready(function () {
    var form1 = $('#add_user');
    var error1 = $('.alert-danger', form1);
    var success1 = $('.alert-success', form1);

    $('#add_user').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        rules: {
            musername: {
                required: true
            },
            mpassword: {
                required: true
            },
            memail: {
                required: true
            },
            mname: {
                required: true
            },
            usertype: {
                required: false
            },
                'access[]': {
                required: true,
                minlength: 1
            }
        },

        messages: {
            musername: {
                required: "Username is required."
            },
            mpassword: {
                required: "Password is required."
            },
            memail: {
                required: "Email is required."
            },
            mname: {
                required: "Name is required."
            },
                'access[]': {
                required: "Access is required.",
                minlength: "Access is required."
            }
        },

        invalidHandler: function (event, validator) { //display error alert on form submit   
            success1.hide();
            $('.alert-danger span').text("You have some form errors. Please check below....");
            $('.alert-danger', $('#add_user')).show();
            Metronic.scrollTo(error1, -200);
        },

        errorPlacement: function (error, element) { // render error placement for each input type
            if (element.parent(".input-group").size() > 0) {
                error.insertAfter(element.parent(".input-group"));
            } else if (element.attr("data-error-container")) {
                error.appendTo(element.attr("data-error-container"));
            } else if (element.parents('.radio-list').size() > 0) {
                error.appendTo(element.parents('.radio-list').attr("data-error-container"));
            } else if (element.parents('.radio-inline').size() > 0) {
                error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
            } else if (element.parents('.checkbox-list').size() > 0) {
                error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
            } else if (element.parents('.checkbox-inline').size() > 0) {
                error.appendTo(element.parents('.checkbox-inline').attr("data-error-container"));
            } else {
                error.insertAfter(element); // for other inputs, just perform default behavior
            }
        },

        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label.closest('.form-group').removeClass('has-error'); // set success class to the control group
        },

        submitHandler: function (form) {
            alert("submitting");
            var url = $(form).attr('action');
            var data = $(form).serialize() + '&ajax_validation=1';
            var accessArray = $('.access:checked').map(function () {
                return this.value;
            }).get();
            var musername = $('input[name="musername"]').val();
            var mpassword = $('input[name="mpassword"]').val();
            var memail = $('input[name="memail"]').val();
            var mname = $('input[name="mname"]').val();
            var mtype = $('select[name="mtype"]').val();
            // form validation success, call ajax form submit
            $.ajax({
                url: url,
                data: {
                    access: accessArray,
                    musername: musername,
                    mpassword: mpassword,
                    memail: memail,
                    mname: mname,
                    mtype: mtype
                },
                type: 'POST',
                success: function (result) {
                    if (result === "ok") {
                        $("form#add_user")[0].reset();
                        $('input').prop("checked", false);
                        $('.alert-success').text("New user has been added");
                        $('.alert-success', $('#add_user')).show();
                    } else {
                        $('.alert-danger').text("error message here");
                        $('.alert-danger', $('#add_user')).show();
                    }
                }
            });
            return false;
        }
    });
});