Ajax, JQuery Validation, and MVC

Question

I have an issue I can't seem to solve. First some context that may be relevant.

I am building a MVC-like (I say "like" because I'm still learning how MVC works) php framework for my software. I want all the input forms to submit data via ajax to a backend controller that routes the data and inputs it into the appropriate database. All the HTML code is generated through php classes and the JavaScript in included through php classes.

The problem I'm having is with the ajax function. It keeps trying to submit the post request normally while I want it to submit asynchronously. I've had it working properly at various points in time but it seems to break when I change aspects of the framework. I've tried various combinations of "form.preventDefault()" and "return false" but it doesn't seem to matter. The validation part works (it won't submit with invalid entries. Using this plugin). I discovered that JavaScript caches itself and I've worked through that by appending version numbers to the file name.

Here is the ajax code. It returns a message to the user about the status of the request. Any idea why it refuses to submit asynchronously?

         $(document).ready(function() { 
            // Initialize form validation 
    ***old code 
$("form[name='ajaxform']").validate({ ***
         // Specify validation rules 

    ***Updated code
        $('#ajaxsubmit').on('click', function() {


        $("#ajaxform").valid();
    });
    // Initialize form validation
 $('#ajaxform').validate({ ***


    ....[omitting the validation rules for brevity]

        errorElement : 'div', 
        errorLabelContainer: '#usermessage',

    submitHandler: function(form) {
        $.ajax({
            cache   : false,
            url     : $(form).attr('action'),
            type    : 'POST',
            dataType: 'text',
            data    : $(form).serialize(),
            success : function(data) {
                var response = $.parseJSON(data);
                if(response['error']){
                    $('#usermessage').html(response['error']);
                    }else{
                    if(response['success']){
                    $('#usermessage').css({"color":"#00b300","font-weight":"bold"});
                    $('#usermessage').html(response['success']);
                    }
                    }
                },
                error   : function(err) {
                            alert(err);   
                }
            });    
    return false;
    }
    });

    });

@shamelessApathy, since the validation plugin responds to the form submission, how would you trigger the plugin if you changed the button type to "button" as you say? — SuperCatchyUsername, Jul 31 '17 at 18:30
I just found this. https://www.google.com/url?sa=t&source=web&rct=j&url=https://stackoverflow.com/questions/13671710/jquery-form-validation-on-button-click&ved=0ahUKEwjH3P75k7TVAhVV2GMKHYViD-AQFggeMAE&usg=AFQjCNE9Q6JDrlG0zgDxgSCvEuoLggLruw. I'll try it and get back to you. Thanks! — SuperCatchyUsername, Jul 31 '17 at 18:36

score 0 · Answer 1 · answered Jul 31 '17 at 17:40

0

Here's how I've handled having problems with forms trying to submit even when I'm trying to preventDefault().

I haven't seen your HTML markup so I can't be certain.

If you have a

<button type='submit'>Submit</button>

Change it to

<button type='button'>Submit</button>

and then listen for the click on the button with javascript rather than a form submission

answered Jul 31 '17 at 17:40

shamelessApathy

105
5

I tried changing the submit button to type "button" and updated my code like it describes in that link I provided. While it isn't submitting normally anymore (thank you) and won't trigger the ajax function. Any idea why? I'll updated my code. – SuperCatchyUsername Aug 01 '17 at 11:57

score 0 · Answer 2 · answered Jul 31 '17 at 18:38

0

You can change the handler:

submitHandler: function(form) {

To handle the events as well:

submitHandler: function(form, event) {
    event.preventDefault();

answered Jul 31 '17 at 18:38

Gustavo Jantsch

382
2
9

Ajax, JQuery Validation, and MVC

2 Answers2