form validation and submission

Question

I am using formvalidation.io but I cannot stop the form submitting on successful validation. It immediately submits request and refreshes page. I need to send form information via ajax.

I must be overlooking something obvious? http://jsfiddle.net/k281at67/94/

The HTML:

<form method="post" id="estimateForm1" class="form-horizontal bv-form">
<input type="hidden" name="page_source" id="page_source" value=""/>

    <fieldset>

     <input type="hidden" name="RefferingPage" value="' . $page . '" />

    <div class="form-group">
        <div class="row">

        <div class="col-md-8 pad_right">
            <input type="text" class="form-control" name="Name" placeholder="*Your name" value="" />
        </div>


    </div><!--row-->
  </div><!--form group-->

    <div class="form-group">
        <div class="row">
            <div class="col-md-8 pad_right">
               <input type="text" class="form-control" name="Phone" placeholder="*Phone" class="phone" value="111-111-1111" />
            </div>

          </div>
    </div>



      <div class="form-group">
        <div class="row">
            <div class="col-md-8 pad_right">
                <input type="text" name="Email"  class="form-control" placeholder="*Email" id="" value="pie@aol.com"/>
            </div>


         </div>


        </div>




   <div class="form-actions">
                    <div class="row">
                        <div class="col-md-2 col-md-offset-5 col-xs-2">
                            <button class="btn btn-default" type="submit" disabled="disabled">
                                <i class="fa fa-eye"></i>
                                Validate
                            </button>
                        </div>
                    </div>
                </div>
  </fieldset>
</form>

The Javascript

jQuery('#estimateForm1')
        .formValidation({
            framework: 'bootstrap',
            err: {
                container: 'tooltip'
            },
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                Name: {
                    row: '.col-md-8',
                    validators: {
                        notEmpty: {
                            message: 'The first name is required'
                        },
                        stringLength: {
                            min: 2,

                            message: 'Must be at-least 2 characters long.'
                        },
                        regexp:
                        {
                            message: 'Please only use A-Z characters.',
                            regexp: /^[a-zA-Z]+$/
                        }

                    }
                },
                Phone: {
                    row: '.col-md-8',
                    validators: {

                        notEmpty: {
                            message: 'The phone number is required'
                        },
                        stringLength: {
                            min: 14,
                            max: 15,
                            message: 'Not a valid phone #.'
                        },
                        regexp: {
                            message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
                            regexp: /^[0-9\s\-()+\.]+$/
                        }
                    }
                },
                Email: {
                    row: '.col-md-8',
                    validators: {
                        notEmpty: {
                            message: 'The email address is required'
                        },
                        regexp: {
                            regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
                            message: 'The value is not a valid email address'

                        }


                    }
                }


            }

        }).find('[name="Phone"]').mask('(000) 000-0000')
        .on('success.field.fv', function(e, data) {
            if (data.fv.getSubmitButton()) {
                e.preventDefault();
                //data.fv.disableSubmitButtons(true);
                 console.log('prevented submission');
            }

        }).on('success.form.bv',function(e)
        {
            e.preventDefault();


           console.log('prevented submission');


        });

Answer 1

This function to stop call submit event. It should be calling manual

$(document).ready(function() {

 $("#formname").submit(function(e) {

     e.preventDefault();
 });
});

Second option should be good for validation of form to client side. If you validate all value to return true then fire submit event other wise not fire.

 function validation() {

     return false;
 });

But calling function on submit button like this

onclick="return validation()

Answer 2

1. You have a typo in your code:

This =>

.on("success.form.bv", function(e) { ...

should be =>

.on("success.form.fv", function(e) { ...

2. You have to trigger the event on the form instance, not the Phone field.

I suggest you to do the following:

jQuery('#estimateForm1')
    .find('[name="Phone"]')
        .mask('(000) 000-0000')
        .end()    // <=== DON'T FORGOT TO ADD THIS
    .formValidation({
        // ...
    })
    .on('success.field.fv', function(e, data) {
        // ...
    })
    .on('success.form.fv',function(e) {
        e.preventDefault();
        console.log('prevented submission');
    });

3. See Using Ajax to submit the form example.

Answer 3

Try this

.on('success.form.bv',function(e)
        {
            e.preventDefault();

           return false;
           console.log('prevented submission');


        });