Combine Validation (js), submit (php) and modal (bootstrap) in form

Question

I am using Bootstrap to create a simple contact form and would like to achieve the following when pressing the "submit" button:

Validate the form fields using jQuery
Submit the form if validation passes, using PHP as the processor
Show a message inside of a Bootstrap modal dialog that says the form has been emailed

Knowing that my PHP and JS knowledge is below average, I am glad to say that I have been able to make all items work separately, but I am not able to combine them...

Could you give me some input?

Validation uses :

var validator = $("#contact").validate({
  ...

PHP uses :

mail()

Both work when submitting the form with a button like this:

<button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right">Send</button>

To activate the dialog, I changed the button to:

<button href="#submit" role="button" button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right" data-toggle="modal">Send</button>

This makes the modal appear correctly, but validation and submission do not occur.

I have found a related post : jQuery Modal that appears on form submit. But I do not know to adapt this specifically to my case.

I have tried to adapt what you told me and this is what I got : Html part :

button href="#submit" role="button" button type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right" data-toggle="modal">Envoyer</button>

and

<div id="submit" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Thanks for your mail</h3>
      </div>
      <div class="modal-body">
        <p>We will get back to you soon</p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </div>

In my JS file :

var $validator = {};

$(document).ready(function()
{
    // validate signup form on keyup and submit
    var validator = $("#contact").validate({
       submitHandler: function(form)
        {
            //code to submit your form here
            //code to open your modal here
        errorClass:'error',
        validClass:'success',
        errorElement:'span',
        highlight: function (element, errorClass, validClass) { 
            $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
        }, 
        unhighlight: function (element, errorClass, validClass) { 
            $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
        },
        rules: {
            fname: {
                required: true,
                minlength: 2
            },
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true,
                minlength: 10
            }
        },
        messages: {
            fname: {
                required: '<span class="help-inline">First name.</span>',
                minlength: jQuery.format('<span class="help-inline">2 chars</span>')
            },
            name: {
                required: '<span class="help-inline">Name.</span>',
                minlength: jQuery.format('<span class="help-inline">2 chars</span>')
            },
            email: {
                required: '<span class="help-inline">Email.</span>',
                email: '<span class="help-inline">Ex : name@exemple.com</span>'
            },
            message: {
                required: '<span class="help-block">Message</span>',
                minlength: jQuery.format('<span class="help-block">10 chars</span>')

        $('form').submit(function() {
            if ($validator.numberOfInvalids() > 0) {
                $('#submit').modal('hide');
            } else {
                $('#submit').modal('show');
            }
        }
    });
}
);

I am surely missing something but for the moment, only the modal part is executed and not the validation part or submit form part.

Any idea what I should do to make this work?

trismi · Answer 1 · 2013-01-01T19:59:27.427

If you're using bassastance's jquery validation plugin, you are looking for the submitHandler option, which is defined here: http://docs.jquery.com/Plugins/Validation/validate#toptions

$(document).ready(function()
    {
        // validate signup form on keyup and submit
        var validator = $("#contact").validate({
           submitHandler: function(form)
            {
                //code to submit your form here
                //code to open your modal here
            }
        });
    }
);

UPDATE: I'm updating this answer based on further code provided by Fred.

Javascript:

var $validator; //declared for further use later

$(document).ready(function()
{
    // validate signup form on keyup and submit
    $validator = $("#contact").validate({
        errorClass:'error',
        validClass:'success',
        errorElement:'span',
        highlight: function (element, errorClass, validClass) { 
            $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
        }, 
        unhighlight: function (element, errorClass, validClass) { 
            $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
        },
        rules: {
            fname: {
                required: true,
                minlength: 2
            },
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true,
                minlength: 10
            }
        },
        messages: {
            fname: {
                required: '<span class="help-inline">First name.</span>',
                minlength: jQuery.format('<span class="help-inline">2 chars</span>')
            },
            name: {
                required: '<span class="help-inline">Name.</span>',
                minlength: jQuery.format('<span class="help-inline">2 chars</span>')
            },
            email: {
                required: '<span class="help-inline">Email.</span>',
                email: '<span class="help-inline">Ex : name@exemple.com</span>'
            },
            message: {
                required: '<span class="help-block">Message</span>',
                minlength: jQuery.format('<span class="help-block">10 chars</span>')
            }
        },
        submitHandler: function(form) //submitHandler is an option taken by the validate function
        {
            //i put your submission code in here

            $('form').submit(function() {
                if ($validator.numberOfInvalids() > 0) 
                {
                    $('#submit').modal('hide');
                } else 
                {
                    $('#submit').modal('show');
                }
            });
        }
    });
});

Hi trismi, Thanks for your input! I have tried to adapt what you told me and this is what I got : — Fred, Jan 01 '13 at 15:37
Hi Fred, it looks like you put my code before the elements in your array for the function, but it's actually supposed to be part of that array. I'm going to update my answer to include your 'fixed' code, but not sure it'll work, because I'm not sure what you're using for the modal. Do you have this posted somewhere online that you can send me a link for? — trismi, Jan 01 '13 at 19:57
Hi trismi, thanks for helping me that much! I tried your code but the submit button neither sends the email nor shows the modal window. I understand that it might be easier to help if you can see what I am doing. Therefore you can access following site : test(.)hennequin(.)webfactional(.)com/contact-modal.php. Thanks again for your precious help!!! — Fred, Jan 01 '13 at 23:51
Hi Fred- It looks like on line 92 in the generated HTML, you have a script tag that has a paragraph in it that is throwing an error. In addition to which, when I click "submit", I received an error saying that "Object object has no modal method," where object is the $("#submit") element. This means there is probably some other javascript you need to add to associate that object with the modal method you are trying to use. Also, do you have an email I can contact you at? I don't think the forums are for debugging like this. — trismi, Jan 02 '13 at 17:11
Trismi, I apparently had a php environment problem. I have started on a new environment and based on your example and input as also, another one from github (https://github.com/wsfulmer/bootstrap-contact/blob/master/contact.php), I managed to solve the script tag errors and make it work! Thanks again for all your help! — Fred, Jan 02 '13 at 17:29
Always glad to help :) Could you mark this question as answered? It lets other people know the question is already answered, and also assigns credit for helping answer the question. — trismi, Jan 04 '13 at 03:08

Combine Validation (js), submit (php) and modal (bootstrap) in form

1 Answers1